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 终止迭代，比如下面的示例遍历到第二个元素后会终止：

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

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

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

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

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

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

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

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

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

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

jQuery.map(array,callback)

说明：

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

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

讲解：

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

下面是几个例子：

 var arr = [ "a", "b", "c", "d", "e" ]
     $("div").text(arr.join(", "));//a,b,c,d,e

     arr = jQuery.map(arr, function(n, i){//函数参数前一位是数组值，后一位是下标
       return (n.toUpperCase() + i);
     });
     $("p").text(arr.join(", "));//A0,B1,C2,D3,E4

     arr = jQuery.map(arr, function (a) { return a + a; });
     $("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覆盖。如下例：

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

结果：

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

当不指定target时，

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

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

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

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

 obj1 = { a : 'a', b : 'b' };
 obj2 = {  x : { xxx : 'xxx', yyy : 'yyy' },  y : 'y' };
 $.extend(true, obj1, obj2);
 alert(obj1.x.xxx);  // 得到"xxx"
 obj2.x.xxx = 'zzz';          //修改obj2对象属性的内联值，不影响合并后对象obj1
 alert(obj2.x.xxx); // 得到"zzz"
 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 )。

 var arr = [ 4, "Pete", 8, "John" ];
 jQuery.inArray("John", arr);  //
 jQuery.inArray(4, arr);  //
 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：

 var test = "123";
 alert(isNaN(test));
 alert(isFinite(test));

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

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

---

• 字符处操作工具函数

jQuery.trim(str)

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

---

• Url 操作工具函数

jQuery.param(obj)

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

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

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

结果：

width=1680&height=1050