jQuery核心及其工具

1、核心函数

jQuery核心函数为$，可以作为$("document").ready()的简写，可以用来作为一个在DOM文档载入完成后执行的函数，

简写和全写一样，不过在使用时候有区别，一个文档中$只能有一个要包裹所有的操作，而全写的可以有多个，分别包裹。

2、jQuery对象的访问

$(".first").size()  等价于$(".first").length() 获得长度

get([index])  不带参数时，取得所有匹配的DOM元素的集合，参数index表示取得第几个匹配的元素，此时函数用于取得第一个匹配的元素

join()函数用来将数组中的内容连接成一个字符串，如果里面带单数如join(",")则以参数为分割符，连在一起组成字符串。

reverse()  函数用于将得到的DOM元素数组内的各项反序。

使用get(index)可以根据已有的index定位匹配的元素位置，同样如果在已经得到元素的情况下可以查询其在DOM元素数值中的位置

这时候使用index(subject)  找到返回number，没找到返回-1

遍历对象集

for循环 、each(callback)其中的callback函数可以设定返回值，返回false时将停止循环(等同于break)，设置ture时家你个跳至下一循环(等同与continue)。

3、数据缓存

隐藏数据

设置和获取元素的缓存数据

设置缓存数据的函数为data(name,value)   name为存储的数据名，value为存储的数据值

获取数据的使用data(name)

其中value可以为包括字符串在内的所有数据类型，为在一个变量中保存多为数组提供来方便

$("#testbutton").click(

                    function(){                        

                        $("#div1").data("style", {font:14,border:2});

                        $("#div3").html("style.font: " + $("#div1").data("style").font

                                                        + "<br/>style.border:" + $("#div1").data("style").border);

                    }

                );

代码中定义了stytle，并为其设定来一组数据，可以像在C语言中访问结构体一样使用“.”操作符进行访问。

删除缓存数据removeData(name)，与data(name,value)的操作刚好相反。

4、jQuery常用工具类

浏览器相关

jQuery.browser的可用值有safari、opera、msie、mozilla

function(){

                    //显示浏览器类型以及版本

                    jQuery.each(jQuery.browser, function(i, val) {

                        $("<div>" + i + " : <span>" + val + "</span>")

                        .appendTo("#div3");

                    });

                                            

                    }

显示结果为：

这里用来显示结果.

version : 1.9.2.10

safari : false

opera : false

msie : false

mozilla : true
数组与对象相关
each(obj,callback)
var arr=["one","two","three","four","five"];
如果只想遍历数组中前面4个元素,则可以设置返回false

function() {
                                    var arr = [ "one", "two", "three", "four",
                                            "five" ];
                                    var obj = {
                                        one : 1,
                                        two : 2,
                                        three : 3,
                                        four : 4,
                                        five : 5
                                    };

                                    jQuery.each(arr, function() {
                                        $("#div3").append(
                                                "<div id='"+this+"'>My id is "
                                                        + this + ".</div>");
                                        return (this != "four");
                                    });
                                    jQuery.each(obj, function(i, val) {
                                        $("#" + i).append(
                                                document.createTextNode("--"
                                                        + val));
                                    })

为真时候等同为continue，继续执行循环。

extend()扩展数组
extend(target,obj1,[bojN])
target待修改对象，obj1待合并到第一个对象的对象，objN待合并到第一个对象的对象
var empty={};
var defaults={validate:false,limit:5,name:"foo"};
var options={validate:true,name:"bar"}
var setting=jQuery.extend(empty,defaults,options);
我们可以看到执行之后setting={validate:true,limit:5,name:"bar"};
empty与setting相等
defaults里面的数值没有任何改变，使之得到来很好的保留
grep()筛选数组
jQuery.grep(array,callback,[invert])
array待过滤数组,callback该函数处理数组中的每个元素，
invert(boolean)如果invert为false或未设置，则函数返回数组中由过滤函数返回true的元素,当invert为true时，
则返回过滤元素中为false的元素，即是否对过滤进行反转。
返回值为object。
如显示index比3大，且数字本身不是5的数字,函数中n代表number，i代表index

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];

                    $("#div3").append("<br/>"+arr.join(", "));
                    arr = jQuery.grep(arr, function(n, i){

                      return (n != 5 && i > 3);

                    });

                    $("#div3").append("<br/>"+arr.join(", "));

inArray()判断是否在数组中

jQuery.inArray(value,array)  确定第一个参数在数组中的位置，(如果没有找到，返回-1)

返回值:Number

value用户在数组中查找是否存在，array待处理数组

makeArray()生成数组

jQuery.makeArray(obj)  将类数组对象转化为数组对象，类数组对象有length属性，其成员索引为0至length-1。

实际中次函数在jQuery中将自动使用而无需特意转换。

返回值：Array     参数：obj类数组对象

调用方式如下所示：

function(){                                            

                    //makeArray：生成数组

                    var arr = jQuery.makeArray(document.getElementsByTagName("p"));

                    arr.reverse(); // use an Array method on list of dom elements

                    $(arr).appendTo("#div3");                       

                    }

map()数组元素映射

jQuery.map(array,callback)     将以个数组中的元素转换到另一个元数组中

返回值：Array

参数：array为待转换数组，callback为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数

调用实例如下：

function(){                        

                    //map：数组元素映射        

                    var arr = [ "a", "b", "c", "d", "e" ]

                    $("#div3").append("<br/>" + arr.join(", "));

                    arr = jQuery.map(arr, function(n, i){

                      return (n.toUpperCase() + i);

                    });

                    $("#div3").append("<br/>" + arr.join(", "));

                    arr = jQuery.map(arr, function (a) { return a + a; });

                    $("#div3").append("<br/>" + arr.join(", "));    

                    }

map()函数的第二个参数(也就是转换函数)可以设置为一个字符串，当设置为字符串时，将视为缩写形式,其中a代表数组元素。

有如下语句：a*a

与下述语句等价：

function(a){

return a*a;

}

unique()删除重复元素

jQuery.unique(array)

返回：jQuery

其他功能行函数

isFunciton()、trim()、

5、jQuery的插件机制

jQuery具有很强的可扩展性,不但可以定义插件来对其进行扩展，甚至还可以对jQuery对象本身进行扩展，

jQuery提供了与插件机制相关的两种方式：

jQuery.extend(Object)

jQuery中本身没有提供比较两个数字大小的函数，现在定义两个函数min()和max()对jQuery对象本身进行扩展

jQuery.extend({

          min:     function(a, b) {

                    return a < b ? a : b; 

                },

          max:     function(a, b) {

                    return a > b ? a : b; 

                }

        });     

调用形式和普通的函数一样，因为其已经是jQuery对象的一部分了。

$("#div3").html("min(2, 3): " + $.min(2, 3)

                                + "<br/>max(4, 5):" + $.max(4, 5));

                        $("#div3").html("min(2, 3): " + jQuery.min(2, 3)

                                + "<br/>max(4, 5):" + jQuery.max(4, 5));

jQuery.fn.extend(Object)

此方法用于扩展jQuery元素集来提供新的方法，目前很多方法都是基于这种机制来实现的。

如改变匹配元素的背景的函数

jQuery.fn.extend({

          colorize: function(color) {

            return this.each(

                function() {

                    $(this).css("background", color);

                }

            );

          }

        }); 

调用方式，使用普通的jQuery对象即可调用

 $(".first").colorize("red");