JQuery系列（3） - 工具方法

jQuery函数库提供了一个jQuery对象（简写为$），这个对象本身是一个构造函数，可以用来生成jQuery对象的实例。有了实例以后，就可以调用许多针对实例的方法，它们定义jQuery.prototype对象上面（简写为$.fn）。

除了实例对象的方法以外，jQuery对象本身还提供一些方法（即直接定义jQuery对象上面），不需要生成实例就能使用的静态方法。由于这些静态的方法类似“通用工具”的性质，所以我们把它们称为“工具方法”（utilities）。

工具方法多为静态的。

常用的工具方法

1. $.trim方法
   $.trim方法用于移除字符串头部和尾部多余的空格。
2. $.contains方法
   $.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。

   $.trim('   Hello   ') // Hello
   
   $.contains(document.documentElement, document.body);
   // true
   
   $.contains(document.body, document.documentElement);
   // false

   参数只能是DOM元素，JQuery对象可以吗？

3. $.each，$.map

   $.each方法用于遍历数组和对象，然后返回原始对象。它接受两个参数，分别是数据集合和回调函数。需要注意的，jQuery对象实例也有一个each方法（$.fn.each），两者的作用差不多。
   $.map方法也是用来遍历数组和对象，但是会返回一个新对象。
   前者侧重原始数据输出，后者侧重原始数据处理返回？

   $.each([ 52, 97 ], function( index, value ) {
     console.log( index + ": " + value );
   });
   // 0: 52
   // 1: 97 
   
   var obj = {
     p1: "hello",
     p2: "world"
   };
   $.each( obj, function( key, value ) {
     console.log( key + ": " + value );
   });
   // p1: hello
   // p2: world
   
   var a = ["a", "b", "c", "d", "e"];
   a = $.map(a, function (n, i){
     return (n.toUpperCase() + i);
   });
   // ["A0", "B1", "C2", "D3", "E4"]
   

4. $.inArray

   $.inArray方法返回一个值在数组中的位置（从0开始）。如果该值不在数组中，则返回-1。

5. $.extend

   $.extend方法用于对象扩展，可以将多个对象合并进成一个对象。

   //$.inArray()
   var a = [1,2,3,4];
   $.inArray(4,a) //
   
   //$.extend()
   var o1 = {p1:'a',p2:'b'};
   var o2 = {p1:'c'};
   
   $.extend(o1,o2);
   o1.p1 // "c"
   
   //$.extend()
   var o1 = {p1:'a',p2:'b'};
   var o2 = {p1:'c'};
   
   var o = $.extend({},o1,o2);
   o
   // Object {p1: "c", p2: "b"}

   取待合并对象属性集合，重名属性后者覆盖前者。

   默认情况下，extend方法生成的对象是“浅拷贝”，也就是说，如果某个属性是对象或数组，那么只会生成指向这个对象或数组的指针，而不会复制值。如果想要“深拷贝”，可以在extend方法的第一个参数传入布尔值true。

   var o1 = {p1:['a','b']};
   
   var o2 = $.extend({},o1);
   var o3 = $.extend(true,{},o1);
   
   o1.p1[0]='c';
   
   o2.p1 // ["c", "b"]
   o3.p1 // ["a", "b"] 

   上面代码中，o2是浅拷贝，o3是深拷贝。结果，改变原始数组的属性，o2会跟着一起变，而o3不会。

6. $.proxy

   $.proxy方法类似于ECMAScript 5的bind方法，可以绑定函数的上下文（也就是this对象）和参数，返回一个新函数。

   由上面代码2种写法可知，$.proxy()方法有2种使用方法

   第一种写法是为函数（function）指定上下文对象（context），第二种写法是指定上下文对象（context）和它的某个方法名（name）。

   //$(this)指向引发事件的DOM对象$('#myElement')
   $('#myElement').click(function() {
       $(this).addClass('aNewClass');
   });
   
   //$(this)因使用setTimeout延迟函数而指向了window
   $('#myElement').click(function() {
       setTimeout(function() {
           $(this).addClass('aNewClass');
       }, 1000);
   });
   
   //使用$.proxy()改变this指向
   $('#myElement').click(function() {
       setTimeout($.proxy(function() {
           $(this).addClass('aNewClass');
       }, this), 1000);
   });

   正常情况下，下面代码中的this对象指向发生click事件的DOM对象。
   如果我们想让回调函数延迟运行，使用setTimeout方法，代码就会出错，因为setTimeout使得回调函数在全局环境运行，this将指向全局对象。
   这时，就可以用proxy方法，将this对象绑定到指定的对象。
   setTimeOut()解决绑定了吗？需要测试。

7. $.data，$.removeData

   $.data方法可以用来在DOM节点上储存数据。$.removeData方法用来移除DOM节点存储的数据。读取所有数据返回的是对象？

   // 存入数据
   $.data(document.body, "foo", 52 );
   
   // 读取数据
   $.data(document.body, "foo");
   
   // 读取所有数据
   $.data(document.body);
   
   // 移除数据
   $.removeData(document.body, "foo");

8. $.parseHTML，$.parseJSON，$.parseXML  将字符串解析为特定对象

   $.parseHTML方法用于将字符串解析为DOM对象。

   $.parseJSON方法用于将JSON字符串解析为JavaScript对象，作用与原生的JSON.parse()类似。但是，jQuery没有提供类似JSON.stringify()的方法，即不提供将JavaScript对象转为JSON对象的方法。

   $.parseXML方法用于将字符串解析为XML对象。

   var html = $.parseHTML("hello, <b>my name is</b> jQuery.");
   var obj = $.parseJSON('{"name": "John"}');
   
   var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>";
   var xmlDoc = $.parseXML(xml);

9. $.makeArray

   $.makeArray方法将一个类似数组的对象，转化为真正的数组。

10. $.merge

    $.merge方法用于将数组并。

    // $.makeArray()
    var a = $.makeArray(document.getElementsByTagName("div"));
    
    // $.merge()
    var a1 = [0,1,2];
    var a2 = [2,3,4];
    $.merge(a1, a2);
    
    a1
    // [0, 1, 2, 2, 3, 4]

11. $.now

    $.now方法返回当前时间距离1970年1月1日00:00:00 UTC对应的毫秒数，等同于(new Date).getTime()。

    $.now()
    //

判断数据类型的方法

jQuery提供一系列工具方法，用来判断数据类型，以弥补JavaScript原生的typeof运算符的不足。以下方法对参数进行判断，返回一个布尔值。

• jQuery.isArray()：是否为数组。
• jQuery.isEmptyObject()：是否为空对象（不含可枚举的属性）。
• jQuery.isFunction()：是否为函数。
• jQuery.isNumeric()：是否为数值（整数或浮点数）。
• jQuery.isPlainObject()：是否为使用“{}”或“new Object”生成的对象，而不是浏览器原生提供的对象。
• jQuery.isWindow()：是否为window对象。
• jQuery.isXMLDoc()：判断一个DOM节点是否处于XML文档之中。

$.isEmptyObject({}) // true
$.isPlainObject(document.location) // false
$.isWindow(window) // true
$.isXMLDoc(document.body) // false

除了上面这些方法以外，还有一个$.type方法，可以返回一个变量的数据类型。它的实质是用Object.prototype.toString方法读取对象内部的[[Class]]属性

$.type(/test/) // "regexp"

参考

【1】阮一峰 http://javascript.ruanyifeng.com/jquery/utility.html