jQuery-Utils

发布于 2016-09-01 17:04 阅读数 220

本文必须得到作者授权后，方可转载，摘要引流随意。
By 依韵 , From https://blog.cdswyda.com/post/20160901

jQuery.contains( container, contained )

描述：$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。

返回：true or false Boolean

参数：

container HTMLElement 指定可能包含其他元素的祖辈容器元素。

contained HTMLElement 指定可能被其他元素包含的后代元素。

使用示例：

1
2

$.contains(document.getElementsByTagName('html')[0],document.getElementsByTagName('body')[0]); //true
$.contains(document.getElementsByTagName('html')[0],document.getElementsByTagName('body')); //false

上面第二个返回false的原因是因为getElementsByTagName方法返回的是一个NodeList集合。

<div id="container">
    <ul id="bottom-nav">
        <li id="nav-fist"></li>
        <li id="nav-sec"></li>
    </ul>
</div>

var $container = $('#container'),
    $bottomNav = $('#bottom-nav'),
    $itemFirst = $('#nav-fist'),
    $itemSec = $('#nav-sec');
$.contains($container, $bottomNav);         //false
$.contains($container[0], $bottomNav[0]);   //true
$.contains($container[0], $itemFirst);      //false
$.contains($container[0], $itemFirst[0]);   //true

第一个和第三个返回false的原因是由于传入的参数是jquery对象，不是方法所要求的dom对象，需要进行转换，jquery对象转化为dom对象可调用jquery对象的get(0)方法，或直接使用[0]操作符

两个数必须为dom元素，不能是jquery对象、JavaScript对象或者NodeList等其他对象。
第二个参数为文本或内容节点时，将返回false。

遍历方法jQuery.each()和jQuery.map()

jQuery.each()

描述：each()方法用于遍历数组和对象，然后返回原始对象。它接受两个参数，分别是数据集合和回调函数。

返回：原始对象 Object / Array

参数：

array / object Object / Array 要进行遍历的数组或对象

callback function 要执行的回调函数，此回调函数接收两个参数，index(key)和value 分别表示数组的索引和值或对象的键和对象的值

使用示例：

var arr1 = [52, 97];
var arr2 = $.each(arr1, function(index, value) {
    console.log(index + ": " + value);
});
// 0: 52 
// 1: 97 
arr1===arr2; //true

var obj1 = {
    p1: "hello",
    p2: "world"
};
var obj2 = $.each(obj1, function(key, value) {
    console.log(key + ": " + value);
});
// p1: hello
// p2: world
obj1===obj2; // true

var divArray = $('div').get();
$.each(divArray, function(index, dom) {
    console.log(index, dom.className);
});
// 0 "container"
// 1 "doc-cata"
// 2 "nicescroll-rails nicescroll-rails-vr"
// 3 "nicescroll-cursors"
// 4 "nicescroll-rails nicescroll-rails-hr"
// 5 "nicescroll-cursors"

此方法主要用于遍历，不过需要知道其返回值还是原对象，如果希望得到一个新对象，请使用下面的$.map()方法

jQuery的实例对象也有一个each方法，作用类似，格式为：$(selector).each(callback) callback为一个回调函数，参数和$.each()的callback相同。

jQuery.map()

描述：$.map()方法用于遍历数组和对象，然后返回一个新数组。使用参数和$.each()类似，第一个参数为要操作的对象/数组，第二个参数为回调函数。

返回：一个新数组 Array

参数：

array / object Object / Array 要进行遍历的数组或对象

callback function 要执行的回调函数，此回调函数接收两个参数： value和index(key) 第一个参数是数组或对象的值，第二个参数为数组的索引或对象的key

使用示例：

//DEMO1
var arr1 = ["a", "b", "c", "d", "e"];
var arr2 = $.map(arr1, function (n, i){
  return (n.toUpperCase() + i);
});                 
arr2;           //["A0", "B1", "C2", "D3", "E4"]

//DEMO2
var obj1 = {
    p1: "hello",
    p2: "world"
};
var arr3 = $.map(obj1, function(val, key) {
    return (val.toUpperCase() + "_" + key);
});
arr3;           //["HELLO_p1", "WORLD_p2"]

//DEMO3 由于在传入函数中未使用return返回出数据，所以map方法的返回值是一个空数组
var arr4 = $.map(obj1, function(val) {
    console.log(val.toUpperCase());
});
// HELLO
// WORLD
arr4;           // []

//DEMO4
var arr5 = $.map(arr1, function(n, i) {
    if (i % 2 == 0 && (n == 'a' || n == 'c')) {
        return n.toUpperCase();
    } else {
        return n + n;
    }
});
arr5;           //["A", "bb", "C", "dd", "ee"]

$.map()方法返回值始终是一个数组，这个数组来源于传入函数的返回值。
我们可以使用这个方法在原对象或数组的基础上得到一个全新的数组。

需要注意的是，在回调函数中需要使用return，返回这个遍历结果。未使用return则$.map()方法始终返回一个空数组，如上DEMO3所示。

在$.map()方法的回调中，我们还可以对原始对象/数组进行一定的处理。如DEMO4所示，如下标为偶数且值为a或c时，转化为大写，否则重复此值。

jQuery.extend()

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

描述：target为目标对象，此方法的作用是将之后的对象合并到target上。返回类型为Object，值为合并后的target

使用示例：

```javascript:n var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97 }; var object2 = { banana: { price: 200 }, durian: 100 }; // Merge object2 into object1 var obj3 = $.extend( object1, object2 ); obj3 === object1;//true JSON.stringify( object1 ); //"{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}" ```

我们可以看出，方法的返回值和target是严格相等的，是对target进行修改后直接返回的。有时候需要合并，但是不希望修改原来的对象，我们可以将target传递一个空对象进去。如下所示：

```javascript:n var tabDefaultSettings={ allowRefresh:true, allowMax:true, allowClose:true }; var options={ id:'home', name:'首页', allowClose:false }; var settings = $.extend( {}, tabDefaultSettings, options ); JSON.stringify(settings); //"{"allowRefresh":true,"allowMax":true,"allowClose":false,"id":"home","name":"首页"}" tabDefaultSettings; //Object {allowRefresh: true, allowMax: true, allowClose: true} ```

这是一个合并TabsNav默认配置的示例，传入空对象就达到了合并参数，但不影响原对象的目的。

后面的参数如果和前面的参数存在相同的key，那么后面的会覆盖前面的参数值。

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

描述：deep为一个布尔值，表示是否进行深度拷贝和合并，省略时为false。

使用示例：

//with deep
var obj1 = { name: "John", location: { city: "Boston", county: "USA" }, p1: ['a', 'b'] },
    obj2 = { last: "Resig", location: { state: "MA", county: "China" } };
var resWithDeep = $.extend(true, {}, obj1, obj2);
JSON.stringify(resWithDeep, null, 4);
//console show：
{
    "name": "John",
    "location": {
        "city": "Boston",
        "county": "China",
        "state": "MA"
    },
    "p1": [
        "a",
        "b"
    ],
    "last": "Resig"
}

obj1.p1[0] = 'c';
resWithDeep.p1;//["a", "b"]

这是一个加了true的示例，第一个参数中还嵌套子对象location:{city:"Boston"},同样第二个参数中也嵌套子对象location:{state:"MA"}，加了参数true，表示深度拷贝和合并，就是产生一个全新的副本，即使p1属性值为数组，是引用传递，修改obj1的p1属性也不会导致resWithDeep的p1改变，因为加上true时进行了深度拷贝，是一个全新的对象，而不是地址的引用。且会将参数中的子对象分别展开进行合并。为了比较，我们去掉true再比较一下：

// without deep
var obj1 = { name: "John", location: { city: "Boston", county: "USA" }, p1: ['a', 'b'] },
    obj2 = { last: "Resig", location: { state: "MA", county: "China" } };
var resNotDeep = $.extend({}, obj1, obj2);
JSON.stringify(resNotDeep, null, 4);
//console show：
{
    "name": "John",
    "location": {
        "state": "MA",
        "county": "China"
    },
    "p1": [
        "a",
        "b"
    ],
    "last": "Resig"
}
obj1.p1[0] = 'c';
resNotDeep.p1;          //["c", "b"]

可以发现，不加true时，合并后的结果中location的值直接是最后一个参数的location值，也就是说，它直接把location的值作为一个整体进行了合并。同时，p1属性值为数组，是引用传递，修改obj1的p1属性，resNotDeep的p1也发生了改变。而之前的深度拷贝和合并就不会，修改obj1不会影响resWithDeep

如果希望进行深度拷贝或对参数中存在的子对象里面内容也进行合并，请加上参数true，进行深度合并。但是并非参数中存在子对象就需要深度合并，请根据实际情况，合理选择。

jQuery.extend( src )

描述：只有一个参数时且值为对象时，表示将这个对象合并到jQuery这个对象上去。

使用示例：

var src = {
    info: 'a library of JavaScript',
    introduce: function() {
        console.log('welcome to use jQuery, I am', this.info, '!');
    }
}
$.extend(src);
$.info;             //"a library of JavaScript"
$.introduce();      //welcome to use jQuery, I am a library of JavaScript !

上面就是将src这个对象合并到了jQuery的这个对象，在此之后，我们就可以在jquery上使用src的属性和方法了，如上面的info属性和introduce()方法。

这样可以给jQuery添加属性和静态方法，一些jQuery插件就是用这个方法加到jQuery对象上的。但是请不要随意给jQuery添加属性或方法，因为可能覆盖掉原有的，也可能和别的插件产生冲突。

jQuery.fn.extend()

jQuery.fn.extend( object )

描述： 将一个对象的内容添加到jQuery的原型上去。其实就是给jQuery的实例对象扩展属性和方法。

使用示例：

姓名：
<input id="name" name="name" type="text" >
<br>
<input name="opt" type="checkbox" value="A">A
<input name="opt" type="checkbox" value="B">B
<input name="opt" type="checkbox" value="C">C
<input name="opt" type="checkbox" value="D">D
<br>
<input id="btn" type="button" value="点击">

var obj = {
    info: "This is some information",
    check: function(){
        // 扩展到jQuery原型上后，这里的this表示当前jQuery对象
        this.prop("checked", true);
        return this;
    },
    isEmpty: function(){
        return !$.trim( this.val() );
    }
};

// 将对象obj的属性和方法扩展到jQuery的原型对象上，以便于jQuery实例对象调用。
$.fn.extend( obj );


$("#btn").click(function(){
    if( $("#name").isEmpty() ){
        alert("姓名不能为空!");
        return false;
    }
    $("[name=opt]").check( ); // 全选复选框
    
    alert( $("body").info ); // This is some information
});

jQuery.globalEval()

jQuery.globalEval( code )

描述： 在全局作用域下执行一些JavaScript代码,code即为要执行的代码。与JavaScript原生的Eval()方法类似，但globalEval()的作用域为全局。

使用示例：

var goo = 'goo';
(function() {
    var foo = 'foo';
    // eval的作用域是当前作用域(在这里就是local也就是function作用域),
    // 因此既能访问local也能访问global作用域
    eval('alert(foo)');             // foo
    eval('alert(goo)');             // goo
    // globalEval的作用域为全局，即使它写在当前作用域内，也不能获取当前作用域内的变量。
    $.globalEval('alert(goo)');     // goo
    $.globalEval('alert(foo)');     // ReferenceError foo is not defined
    
})();

jQuery.grep()

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

描述： 查找满足过滤函数的数组元素，并返回其组成的新数组。原始数组不受影响。

参数：

array Array 为要过滤的数组。

function Type：Function( Object elementOfArray, Integer indexInArray ) => BooleanFunction 过滤函数，此函数用来比对数组中的每个元素，第一个参数为正在被检查的数组元素，第二个为此元素的索引值。此函数需要返回一个布尔值，来指定当前元素是否符合过滤条件。this将是全局的window对象。

invert Boolean 默认为false，可省略。表示是否颠倒过滤结果。为false时，将返回过滤函数中返回值为true的元素组成的数组；为true时，将返回过滤函数中返回值为false的元素组成的数组。

使用示例：

var arr0 = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
var arr1 = jQuery.grep(arr0, function( n, i ) {
  return ( n !== 5 && i > 4 );
});
console.log(arr1); // [1, 9, 4, 7, 3, 8, 6, 9, 1]


var arr1_opp = jQuery.grep(arr0, function(n, i) {
    return (n !== 5 && i > 4);
}, true);
console.log(arr1_opp); // [1, 9, 3, 8, 6, 5]

在上述示例中，在过滤函数中指定了过滤条件为：值不等于5且下标大于4。在未加上invert参数时，返回的新数组就是我们希望的结果。第二个中加上了参数invert为true，则表示颠倒过滤结果，即它输出的是，值为5且下标不大于4的原数组元素组成的新数组。

jQuery.inArray()

jQuery.inArray( value, array [, startIndex ] )

描述： 在指定数组中查找指定的值，并返回其索引（未找到则返回-1）。如果存在多个相同的值，则返回第一个匹配值的索引。此查找为严格匹配。

参数：

value要在数组中查找的值。

array被查找的数组。

startIndex默认为0，可省略。表示查找开始的位置。

使用示例：

var arr = [ 4, "Pete", "8", "John" ];

jQuery.inArray( "John", arr );      // 3    
jQuery.inArray( 4, arr );           // 0
jQuery.inArray( "Karl", arr );      // -1   不存在
jQuery.inArray( 8, arr );           // -1   严格匹配 指定的8为number，而数组中8为字符串
jQuery.inArray( "Pete", arr, 2 );   // -1   指定了从索引为2的位置开始查找，而Pete索引为1。

我们常常需要判断一个元素是否在一个数组中，我们只需要判断此函数的返回值和-1的关系即可(只有未找到才返回-1)。

jQuery数据类型判断

jQuery.isArray()

jQuery.isArray( obj )

描述： 判断一个对象是否数组

使用示例：

    jQuery.isArray([]);         // true
    jQuery.isArray($('div'));   // false


    function argumentsNotArrayTest(a,b,c) {
        console.log(arguments);
        return $.isArray(arguments);
    }
    argumentsNotArrayTest(1,2,3);
    // [1, 2, 3]
    // false

类数组并不是数组，因此无论是jQuery对象还是函数里的arguments都返回false。

jQuery.isEmptyObject()

jQuery.isEmptyObject( object )

描述： 判断一个对象是否为空对象（不含可枚举的属性）。

使用示例：

    jQuery.isEmptyObject({});               // true
    jQuery.isEmptyObject({ foo: "bar" });   // false

    var num1 = new Number(1);
    console.log(num1);                      // Number {[[PrimitiveValue]]: 1}
    $.isEmptyObject(num1);                  // true

JavaScript中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等。所以上述示例中最后num1也是一个空对象，因为它不具有可枚举的属性。

jQuery.isFunction()

jQuery.isFunction( obj )

描述： 判断一个对象是否为函数。

使用示例：

    jQuery.isFunction(console);                     // false
    jQuery.isFunction(console.log);                 // true
    jQuery.isFunction(document);                    // fasle
    jQuery.isFunction(document.getElementById);     // true

    var objs = [
        function() {},
        { x: 15, y: 20 },
        null,
        NaN,
        "function"
    ]
    $.each(objs, function(i) {
        var isFunc = jQuery.isFunction(objs[i]);
        console.log(isFunc);
    });
    // true
    // false
    // false
    // false
    // false

jQuery.isNumeric()

jQuery.isNumeric( value )

描述： 判断是否为数值（整数或浮点数）。

使用示例：

    // true (numeric)
    $.isNumeric( "-10" )
    $.isNumeric( "-10." )
    $.isNumeric( "0" )
    $.isNumeric( 0xFF )
    $.isNumeric( "0xFF" )
    $.isNumeric( "8e5" )
    $.isNumeric( "3.1415" )
    $.isNumeric( +10 )
    $.isNumeric( 0144 )
     
    // false (non-numeric)
    $.isNumeric( "-10.." )
    $.isNumeric( "-0x42" )
    $.isNumeric( "7.2acdgs" )
    $.isNumeric( "" )
    $.isNumeric( {} )
    $.isNumeric( NaN )
    $.isNumeric( null )
    $.isNumeric( true )
    $.isNumeric( Infinity )
    $.isNumeric( undefined )

能够正确转化为数字的字符串也返回为true。
但是在jQuery 3.0 中，只有参数为Number类型时才返回true，其他情况一律为false。

jQuery.isPlainObject()

jQuery.isPlainObject( object )

描述： 判断是否为使用“{}”或“new Object”生成的对象，而不是浏览器原生提供的对象。

使用示例：

    $.isPlainObject(document.location);         // false
    jQuery.isPlainObject(window);               // false
    jQuery.isPlainObject(window.location);      // false

    jQuery.isPlainObject({});                   // true
    jQuery.isPlainObject(new Object());         // true
    jQuery.isPlainObject("test");               // false

jQuery.isWindow()

jQuery.isWindow( obj )

描述： 判断是否为window对象。

使用示例：

1	$.isWindow( window ); // true

jQuery.isXMLDoc()

jQuery.isXMLDoc( node )

描述： 判断一个DOM节点是否处于XML文档之中。

使用示例：

1	$.isXMLDoc(document.body); // false

jQuery.type()

jQuery.type( obj )

描述： 可以返回一个变量的数据类型。它的实质是用Object.prototype.toString方法读取对象内部的[[Class]]属性

使用示例：

    $.type( undefined )             // "undefined"
    $.type()                        // "undefined"
    $.type( window.notDefined )     // "undefined"
    $.type( null )                  // "null"
    $.type( true )                  // "boolean"
    $.type( new Boolean() )         // "boolean"
    $.type( 3 )                     // "number"
    $.type( new Number(3) )         // "number"
    $.type( "test" )                // "string"
    $.type( new String("test") )    // "string"
    $.type( function(){} )          // "function"
    $.type( [] )                    // "array"
    $.type( new Array() )           // "array"
    $.type( new Date() )            // "date"
    $.type( new Error() )           // "error" // as of jQuery 1.9
    $.type( /test/ )                // "regexp"

jQuery.makeArray()

jQuery.makeArray( obj )

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

使用示例：

var divNodeList = document.getElementsByTagName("div");
var divArray = $.makeArray(divNodeList);
console.log(divArray[0].className);         // input-group
$.isArray(divNodeList);                     // false
$.isArray(divArray);                        // true

var $ul=$('ul');
var ulArray = $.makeArray($ul);
$.isArray($ul);                             // false
$.isArray(ulArray);                         // true

jQuery.merge()

jQuery.merge( first, second )

描述： 合并第二个数组到第一个数组，会修改第一个数组，而第二个数组不受影响。同样适用于类数组对象。相同元素不会被去除，要去除重复项，请使用。 $.unique()

使用示例：

$.merge([0, 1, 2], [2, 3, 4]);      // [ 0, 1, 2, 2, 3, 4 ]
$.merge([3, 2, 1], [4, 3, 2]);      // [ 3, 2, 1, 4, 3, 2 ]

var arr1 = [1, 10, 100];
var arr2 = $.merge(arr1, [2, 20, 200]);
arr1 === arr2;                      // true

// 同样适用于类数组 但是并不会转化为数组，真实类型受第一个参数影响。
var $ul = $('ul');
var ulArray = $.merge([], $ul);
$.isArray(ulArray);                 //true

var ulArrayTest = $.merge($('h6'), $ul);
$.isArray(ulArrayTest);             //false

jQuery.merge () 方法同样适用于类数组，但是不会将其转化为数组，仅做合并，类型取决于第一个参数。

jQuery.now()

jQuery.now()

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

返回： Number 当前时间距离1970年1月1日00:00:00 的毫秒数

使用示例：

var num1 = $.now(),
    num2 = (new Date).getTime();
console.log(num1);              // 1472442549526
console.log(num2);              // 1472442549526

jQuery.parseHTML()

jQuery.parseHTML( data [, context ] [, keepScripts ] )

描述： $.parseHTML () 方法将字符串解析到一个DOM节点的数组中。

返回： Array 包含DOM节点信息的数组。

参数：

data String 用来解析的HTML字符串

context Element 默认值document，DOM元素的上下文，将在这个上下文中创建的HTML片段。如果没有指定context参数，或该参数为null或undefined，则默认为当前document。如果创建的DOM元素用于另一个文档，例如iframe，则应该指定该iframe的document对象。

keepScripts Boolean 默认值false，表明是否在传递的HTML字符串中包含脚本。

使用示例：

var str = "hello, <b>my name is</b> jQuery.",
    html = $.parseHTML(str);
// 查看解析后的信息
console.log(html);              // [text, b, text]
console.dirxml(html);           // ["hello, ", my name is, " jQuery."]
// 遍历输出其节点信息
$.each(html, function(i, el) {
    console.log(i, el.textContent, el.nodeName);

});
// 索引       textContent     nodeName
// 0    "hello, "       "#text"
// 1    "my name is"    "B"
// 2    " jQuery."      "#text"

以上展示了$.parseHTML () 方法解析字符串到DOM数组的示例。默认不解析脚本，如果需要解析，必须指定参数keepScripts为true，如下所示：

// "<\/script>" 中"/"需要转义一下
var jsTest = 'Hello,<b>jQuery</b><script>alert("执行脚本代码");</script>';
var domNoJs = $.parseHTML(jsTest);
var domWithJs = $.parseHTML(jsTest, true);
console.log(domNoJs);               //[text, b]
console.log(domWithJs);             // [text, b, script]

console.dirxml(domNoJs);            // ["Hello,", &lt;b&gt;jQuery&lt;/b&gt;]
console.dirxml(domWithJs);          // ["Hello,", &lt;b&gt;jQuery&lt;/b&gt;, &lt;script&gt;alert("执行脚本代码");&lt;/script&gt;]
// 未指定keepScripts时，脚本信息被忽略了。

在jQuery 3.0 中，如果没有指定context，或者给定值为null 或 undefined，那么将使用一个新的document，而不是当前document。

jQuery.parseJSON()

jQuery.parseJSON( json )

描述： $.parseJSON() 方法接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 值。

返回： String / Number / Boolean / Array / Object 解析后的JavaScript值。通常都为 Array/Object

参数：

json String 要解析的 JSON 字符串。

传入格式有误的 JSON 字符串可能导致抛出异常。例如，下面这些无效的 JSON 字符串：

{test: 1} (test 没有使用双引号包裹).
{'test': 1} ('test' 用了单引号而不是双引号包裹).
"{test: 1}" (test 没有使用双引号包裹).
"{'test': 1}" ('test' 用了单引号而不是双引号包裹).
"'test'" ('test' 用单引号代替双引号).
".1" (number 必须以数字开头; "0.1" 将是有效的).
"undefined" (undefined 不能表示一个 JSON 字符串; 然而null,可以).
"NaN" (NaN 不能表示一个 JSON 字符串; 用Infinity直接表示无限也是不允许的).

使用示例：

1 2	var person = jQuery.parseJSON( '{ "name": "John" }' ); person.name === "John"; // true

JSON标准不允许“控制字符”如制表符或换行符。比如$.parseJSON('{"testing":"1\t2\n3"}')，大多数实现中将抛出一个错误，因为JavaScript分析器直接转换字符串的制表符和换行符为文本的制表符和换行符;产生双反斜杠，例如"1\\t2\\n3"是预期的结果。这个问题往往在服务器端语言，如PHP，JSON注入到一个JavaScript文件时发生。

如果浏览器实现了原生的 JSON.parse， jQuery 则会使用它来解析字符串。

在jQuery 1.9之前,如果传递给$.parseJSON一个空字符串，null, 或者 undefined,，将返回null，而不是抛出一个错误，即使这些都不是有效的JSON。

从jQuery 3.0 开始，$.parseJSON已经不推荐使用。要将字符串解析成JSON对象，请使用原生的JSON.parse方法来代替。

jQuery.parseXML()

jQuery.parseXML( data )

描述： $.parseXML() 方法用于解析一个字符串到一个XML文档。

返回： XMLDocument 解析后的XMLDocument

参数： data String 用来解析的格式良好的XML字符串。

使用示例：

var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>",
    xmlDoc = $.parseXML( xml );
console.dirxml(xmlDoc);
// 结果：
#document
<rss version="2.0">
    <channel>
        <title>RSS Title</title>
    </channel>
</rss>

jQuery.proxy()

描述： $.proxy ()接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境。

返回： Function 一个新函数

参数说明：

用法一：

jQuery.proxy( function, context [, additionalArguments ] )

function Function 将要改变上下文语境的函数。

context PlainObject 函数的上下文语境(this)会被设置成这个 object 对象。

additionalArguments Anything 任何数目的参数传递给function参数的函数引用。

用法二：

jQuery.proxy( context, name [, additionalArguments ] )

context PlainObject 函数的上下文语境(this)会被设置成这个 object 对象。

name String 将要改变上下文语境的函数名(这个函数必须是前一个参数 context 对象的属性)。

additionalArguments Anything 任何数目的参数传递给name参数中命名的函数。

使用示例：

var zs = {
    name: '张三',
    sex: '男',
    introduce: function(a, b) {
        console.log('我叫', this.name, ',性别:', this.sex, ',我知道:', a, '*', b, '=', a * b);
    }
}

// 直接调用
zs.introduce(1, 1);         // 我叫 张三 ,性别: 男 ,我知道: 1 * 1 = 1

var ww = { name: '王五', sex: '男' };
ww.introduce = jQuery.proxy(zs.introduce, ww, 2331, 12320);
// 代理调用foo()函数，此时introduce方法内部的this指向新对象ww
ww.introduce();             // 我叫 王五 ,性别: 男 ,我知道: 2331 * 12320 = 28717920

ww.introduce1 = jQuery.proxy(zs.introduce, ww);
ww.introduce1(1234,5678);   // 我叫 王五 ,性别: 男 ,我知道: 1234 * 5678 = 7006652

ww这个对象并没有introduce方法，但是zs有，上述示例中就是传入了zs的introduce方法，并指定其上下文语境this为ww,从而个返回了一个新方法。所需要的参数可以在$.proxy直接指定，也可以在调用时传入所需的值。

  <p><button id="test" name='button-test'>Test</button></p>
  <p id="log"></p>

var john = {
  name: "John",
  test: function() {
    $( "#log" ).append( this.name );
    $( "#test" ).off( "click", john.test );         // 点击后取消绑定
  }
};

$( "#test" ).on( "click", $.proxy( john, "test" ) );
// 点击后显示John
// 如果click绑定事件写为$( "#test" ).on( "click", john.test) );  则显示为id为test的button的name属性值：button-test
$( "#test" ).on( "click", john.test) );         // button-test

这是一个官网的示例，演示的是jQuery.proxy( context, name [, additionalArguments ] )这种方式，click事件的处理函数中，this指向的是触发此事件的DOM对象，如果绑定事件写为$( "#test" ).on( "click", john.test) )，则显示的将是按钮的name属性值。使用$.proxy( john, "test" )生成一个新函数，它基于john的test产生，它的上下文环境被更改为john。

jQuery.trim()

jQuery.trim( str )

描述： $.trim() 方法会移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）

返回： String

参数： str String 要去掉首尾空格的字符串

使用示例：

    
var str = "         lots of spaces before and after         ";
str;            // "         lots of spaces before and after         "
$.trim(str);    // "lots of spaces before and after"

jQuery.unique()

jQuery.unique( array )

描述： 排序一个DOM元素的数组（按文档中的顺序），恰当的除去重复项。请注意，这仅适用于DOM元素数组，而不能处理字符串或者数字数组。

$.unique() 函数通过搜索的数组对象，排序数组，并移除任何重复的节点。如果一个节点和已经在数组中的节点完全相同，那么它被认为是重复的; 两个不同的节点具有相同的属性是被认为不重复的。此功能只适用于普通的JavaScript DOM元素的数组。

参数：Array DOM元素的数组。

使用示例：

// html
/*
  <div>There are 6 divs in this document.</div>
  <div></div>
  <div class="dup"></div>
  <div class="dup"></div>
  <div class="dup"></div>
  <div></div>
*/

var divs = $("div").get(); // unique() must take a native array

// add 3 elements of class dup too (they are divs)
divs = divs.concat($(".dup").get());
divs.length;        // 9

divs = jQuery.unique(divs);
divs.length;        // 6
console.dir(divs);  
/*
[
    <div>There are 6 divs in this document.</div>,
    <div></div>,
    <div class="dup"></div>,
    <div class="dup"></div>,
    <div class="dup"></div>,
    <div></div>
]
 */

这是一个官网的示例，先获取到页面中的6个div元素数组，合并class为dup的三个进去，总数为九个，执行unique() 方法后，变回6个。根据官网描述：两个不同的节点具有相同的属性是被认为不重复的。可见原来的6个都被认为是不重复的，仅有最后重新获取合并进去的那三个为重复项，被移除。排序后的顺序即为文档中原本顺序。

在jQuery 3.0中，这种方法已被弃用，只是jQuery.uniqueSort()的别名。请使用该方法代替。

jQuery.uniqueSort()

描述： 负责对元素集合中的元素按照出现在文档中的顺序进行排序，并删除重复元素。

$.uniqueSort() 函数通过搜索的数组对象，排序数组，并移除任何重复的节点。如果一个节点和已经在数组中的节点完全相同，那么它被认为是重复的; 两个不同的节点具有相同的属性是被认为不重复的。此功能只适用于普通的JavaScript DOM元素的数组。

参数：Array DOM元素的数组。

使用和$.unique()相同

此方法在jQuery 1.12/2.2 之后的版本才有（对$.unique()进行了优化），之间的版本请使用$.unique()。

2016-09-01 17:04

220

札记 JavaScript jQuery Utils

Comments

jQuery Deferred对象

10道javascript题目