你的位置:首页 > Java教程

[Java教程]4月13日学习笔记——jQuery工具函数


  • 浏览器及特性检测

jQuery.support.boxModel

 如果这个页面和浏览器是以 W3C CSS 盒式模型来渲染的,则等于 true。通常在 IE 6 和 IE 7 的怪癖模式中这个值是 false。在 document 准备就绪前,这个值是 null。

jQuery.support.cssFloat

如果用 cssFloat 来访问 CSS 的 float 的值,则返回 true。目前在 IE 中会返回 false,他用 styleFloat 代替。


 

  • 数组和对象操作

jQuery.each(object,callback)

注意传入的第一个参数可以是数组或者对象。如果数组,则遍历数组中的每一个对象。第一个参数表示索引,第二个参数表示值,this 表示当前遍历的元素,可以通过返回 false 终止迭代,比如下面的示例遍历到第二个元素后会终止:

1 $.each(["a", "b", "c"], function(i, n)2         {3           alert("Item #" + i + ": " + n);//可以获取到 i 值4           if (i >= 1)5           {6             return false;7           }8         });

如果传递的是对象,则遍历对象的每一个属性,即使函数返回 false 也依然会遍历完所有的属性,第一个参数表示属性 key(属性名称,是 obejct 类型),第二个参数表示值,this 表示当前属性的值:

 1 $("#iterateObject").click(function(event) 2       { 3         $.each({ name: "ziqiu.zhang", sex: "male", status: "single" }, function(i, n) 4         { 5           alert("Item #" + i.toString() + ": " + n ); //第一个参数 i 表示属性的 key(object), this 表示属性值 6           if (i >= 1) 7           { 8             return false; 9           }10         });11       });

特别注意 each 虽然迭代每一个元素或属性,但是在迭代函数中并不会改变当前元素的值,也就是无法改变返回后的对象。如果需要改变数组中的每一个元素并且将结果返回,因使用 jQuery.map(array,callback) 函数。

jQuery.grep(array,callback,[invert])

使用过滤函数过滤数组元素。此函数至少传递两个参数:待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

默认 invert 为 false,即过滤函数返回 true 为保留元素。如果设置 invert 为 true,则过滤函数返回 false 为删除元素。

下面的示例演示如何过滤数组中索引小于 0 的元素:

1 $.grep( [0,1,2], function(n,i){2  return n > 0;3 });

返回的结果是[1,2]。

jQuery.map(array,callback)

说明:

将一个数组中的元素转换到另一个数组中。

作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。

讲解:

1.3.2 版本中此函数和 each 函数已经几乎相同(以前稍有不同),现在唯一的区别就是回调函数可以改变当前元素.返回 null 则删除当前元素。

下面是几个例子:

 1 var arr = [ "a", "b", "c", "d", "e" ] 2   $("div").text(arr.join(", "));//a,b,c,d,e 3  4   arr = jQuery.map(arr, function(n, i){//函数参数前一位是数组值,后一位是下标 5    return (n.toUpperCase() + i); 6   }); 7   $("p").text(arr.join(", "));//A0,B1,C2,D3,E4 8  9   arr = jQuery.map(arr, function (a) { return a + a; });10   $("span").text(arr.join(", "));//aa,bb,cc,dd,ee

 jQuery.extend([deep],target,object1,[objectN])

1.用一个或多个其他对象来扩展一个对象,返回被扩展的对象。

2.如果不指定 target,且只有一个object,则给 jQuery 命名空间本身进行扩展。如果有两个以上的object,则将第一个object作为target。如果指定target,将object依次往target覆盖。如下例:

1 var empty = {}2 var defaults = { validate: false, limit: 5, name: "foo" };3 var options = { validate: true, name: "bar" };4 var settings = jQuery.extend(empty, defaults, options);

结果:

1 settings == { validate: true, limit: 5, name: "bar" }2 empty == { validate: true, limit: 5, name: "bar" }3 defaults == { validate: false, limit: 5, name: "foo" }

当不指定target时,

1 var defaults = { validate: false, limit: 5, name: "foo" };2 var options = { validate: true, name: "bar" };3 var settings = jQuery.extend(defaults, options);

上面的代码将 defaults 作为 target 参数,虽然最后 settings 的结果一样,但是defaults 的值被改变了!

 

 

3.如果第一个参数设置为 true,则表示为深复制,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。

 

4.为定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。

1 obj1 = { a : 'a', b : 'b' }; 2 obj2 = { x : { xxx : 'xxx', yyy : 'yyy' }, y : 'y' }; 3 $.extend(true, obj1, obj2); 4 alert(obj1.x.xxx); // 得到"xxx" 5 obj2.x.xxx = 'zzz';     //修改obj2对象属性的内联值,不影响合并后对象obj16 alert(obj2.x.xxx); // 得到"zzz" 7 alert(obj1.x.xxx); // 得到"xxx" //值保持;如果不加true,则得到“zzz”

$.extend(true, obj1, obj2)表示以obj2中的属性扩展对象obj1,第一个参数设为true表示深复制。

虽然obj1中原来没有"x"属性,但经过扩展后,obj1不但具有了"x"属性,而且对obj2中的"x"属性的修改也不会影响到obj1中"x"属性的值,这就是所谓的“深复制”了。

具体分为三种情况:

  1. 属性是数组时,则将target[name]初始化为空数组,然后递归调用extend;

  2. 属性是对象时,则将target[name]初始化为空对象,然后递归调用extend;

     3. 否则,直接复制属性。

 jQuery.makeArray(obj)

 

1. 将类数组对象转换为数组对象。

 

2. 类数组对象有 length 属性,其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。

 jQuery.inArray(value,array)

确定第一个参数在数组中的位置,从 0 开始计数(如果没有找到则返回 -1 )。

1 var arr = [ 4, "Pete", 8, "John" ];2 jQuery.inArray("John", arr); //33 jQuery.inArray(4, arr); //04 jQuery.inArray("David", arr); //-1

jQuery.merge(first,second)

 

1. 合并两个数组

 

2. 返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项,请使用$.unique()

jQuery.unique(array)

删除数组中重复元素。只处理删除 DOM 元素数组,而不能处理字符串或者数字数组。


  • 测试工具函数

测试工具函数主要用于判断对象是否是某一种类型,返回的都是 Boolean 值:

jQuery.isArray(obj)

jQuery.isFunction(obj)

同时别忘记了 javascript 中自带的 isNaN 和 isFinite:

1 var test = "123";2 alert(isNaN(test));3 alert(isFinite(test));

isNaN 函数判断参数是否是非数字,如果是数字则返回 false。

isFinite 函数检查其参数是否是无穷大。如果参数是 NaN(非数字),或者是正、负无穷大的数,则返回 false.否则返回 true。


 

  • 字符处操作工具函数

jQuery.trim(str)

去掉字符串起始和结尾的空格。


 

  • Url 操作工具函数

jQuery.param(obj)

将表单元素数组或者对象序列化,是.serialize()的核心方法。

数组或 jQuery 对象会按照 name/value 对进行序列化,普通对象按照 key/value 对进行序列化。

1 var params = { width:1680, height:1050 };2 var str = jQuery.param(params);3 $("#results").text(str);

结果:

width=1680&height=1050