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");

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/16473.html

jQuery核心及其工具详解编程语言

相关推荐

发表回复