jQuery中的工具

Posted 2020-11-21 myitnews

1. jQuery.each(object, [callback]), 通用遍历方法，可用于遍历对象和数组

不同于遍历 jQuery 对象的 $().each() 方法，此方法可用于遍历任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

参数说明：

• object：需要遍历的对象或数组。
• callback：每个成员/元素执行的回调函数。

//遍历数组
$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});

//遍历对象
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});

2. jQuery.extend([deep], target, object1, [objectN]), 用一个或多个其他对象来扩展一个对象，返回被扩展的对象

果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。 未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

参数说明：

• target,[object1],[objectN]

  • target：一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。

  • object1：待合并到第一个对象的对象。

  • objectN：待合并到第一个对象的对象。

• [deep],target,object1,[objectN]

  • deep：如果设为true，则递归合并。

  • target：待修改对象。

  • object1：待合并到第一个对象的对象。

• • objectN：待合并到第一个对象的对象。

//合并 settings 和 options，修改并返回 settings
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

//返回结果
settings == { validate: true, limit: 5, name: "bar" }


//合并 defaults 和 options, 不修改 defaults。
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" }

3. jQuery.grep(array, callback, [invert]), 使用过滤函数过滤数组元素

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

参数说明：

• array,callback,[invert]   Array,Function,Boolean

  • array:待过滤数组。

  • callback:此函数将处理数组每个元素。第一个参数为当前元素，第二个参数而元素索引值。此函数应返回一个布尔值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？），其中 a 代表数组元素，i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”。

  • invert:如果 "invert" 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。

//过滤数组中小于 0 的元素。
$.grep( [0,1,2], function(n,i){
  return n > 0;
});
//返回结果：[1, 2]

//排除数组中大于 0 的元素，使用第三个参数进行排除。
$.grep( [0,1,2], function(n,i){
  return n > 0;
}, true);
//返回结果：[0]

4. jQuery.when(deferreds), 提供一种方法来执行一个或多个对象的回调函数，延迟对象通常表示异步事件

参数说明：

• deferreds：一个或多个延时对象或JS对象

when()函数常常和done()函数、fail()函数、then()函数联合使用：

• done(Function func) ： 当deferreds中的处理都完成的时候执行Function回调函数

• fail(Function func) ：当deferreds中有一个处理失败的时候执行Function回调函数

• then(Function func1,Function func2)-：结合了done和fail函数，当都成功执行func1，当有一个失败执行func2

$.when( $.ajax("test.aspx") ).then(function(ajaxArgs){ 
     alert(ajaxArgs[1]); /* ajaxArgs is [ "success", statusText, jqXHR ] */
});

$.when( { testing: 123 } ).done(
   function(x){ alert(x.testing); } /* alerts "123" */
);

$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1,  a2){
    /* a1 and a2 are arguments resolved for the 
        page1 and page2 ajax requests, respectively */
   var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */
   if ( /Whip It/.test(jqXHR.responseText) ) {
      alert("First page has ‘Whip It‘ somewhere.");
   }
});

$.when($.ajax("/page1.php"), $.ajax("/page2.php"))
  .then(myFunc, myFailure);

5. jQuery.makeArray(obj), 将类数组对象转换为数组对象

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

<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>

var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // 使用数组翻转函数

//结果
Fourth
Third
Second
First

6. jQuery.map(arr|obj,callback), 将一个数组中的元素转换到另一个数组中

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

参数说明：

• array,callback

  • array：待转换数组。

• • callbackArray：为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。函数可返回任何值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？），其中 a 代表数组元素。如“a * a”代表“function(a){ return a * a; }”。

• arrayOrObject,callback
  

  • arrayOrObject：数组或者对象。

• • callback：为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。函数可返回任何值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？），其中 a 代表数组元素。如“a * a”代表“function(a){ return a * a; }”。

//将原数组中每个元素加 4 转换为一个新数组。
$.map( [0,1,2], function(n){
  return n + 4;
});
//结果:[4, 5, 6]

//原数组中大于 0 的元素加 1 ，否则删除。
$.map( [0,1,2], function(n){
  return n > 0 ? n + 1 : null;
});
//结果：[2, 3]

//原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。
$.map( [0,1,2], function(n){
  return [ n, n + 1 ];
});
//结果：[0, 1, 1, 2, 2, 3]

7. jQuery.inArray(value,array,[fromIndex]), 确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )

参数说明：

• value,array,[fromIndex]
  • value：用于在数组中查找是否存在
  • array：待处理数组
  • fromIndex：用来搜索数组队列，默认值为0

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

8. jQuery.toArray(), 把jQuery集合中所有DOM元素恢复成一个数组

alert($(‘li‘).toArray());

9. jQuery.merge(first,second), 合并两个数组

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

参数说明：

• first:第一个待处理数组，会改变其中的元素。

• second:第二个待处理数组，不会改变其中的元素。

$.merge( [0,1,2], [2,3,4] )
//结果：[0,1,2,2,3,4]

10. jQuery.unique(array), 删除数组中重复元素

只处理删除DOM元素数组，而不能处理字符串或者数字数组。在jQuery 3.0以上版本该方法已被弃用，请使用 jQuery.uniqueSort()方法。

//删除重复 div 标签
$.unique(document.getElementsByTagName("div"));

11. jQuery.parseJSON(str), 接受一个JSON字符串，返回解析后的对象

在jQuery 3.0 及以后版本中，该方法已被删除，请使用原生方法 JSON.parse(str)。

传入一个畸形的JSON字符串会抛出一个异常，如：

• {test: 1} （ test 没有包围双引号）

• {‘test‘: 1} （使用了单引号而不是双引号）

另外，如果你什么都不传入，或者一个空字符串、null或undefined，parseJSON都会返回 null 

var obj = jQuery.parseJSON(‘{"name":"John"}‘);
alert( obj.name === "John" );

12. jQuery.parseXML(data), 解析一个字符串到一个XML文件

jQuery.parseXML使用原生解析函数浏览器创建一个有效的XML文档。这文档可以被传递给jQuery创建一个典型的jQuery对象，可以查询及操作

//建一个jQuery对象使用一个XML字符串并得到标题节点的值

var xml = ‘<rss version="2.0"><channel><title>RSS Title</title></channel></rss>‘,
      xmlDoc = $.parseXML( xml ),
      $xml = $( xmlDoc ),
      $title = $xml.find( ‘title‘ );            // append "RSS Title" to #someElement
  $( ‘#someElement‘ ).append( $title.text() );        // change the title to "XML Title"
  $title.text( ‘XML Title‘ );    // append "XML Title" to #anotherElement
  $( ‘#anotherElement‘ ).append( $title.text() );

13. jQuery.noop, 一个空函数

当你仅仅想要传递一个空函数的时候，就用他吧。这对一些插件作者很有用，当插件提供了一个可选的回调函数接口，那么如果调用的时候没有传递这个回调函数，就用jQuery.noop来代替执行。

14. jQuery.proxy(function,context),  jQuery 1.4 新增。返回一个新函数，并且这个函数始终保持了特定的作用域

当有事件处理函数要附加到元素上，但他们的作用域实际是指向另一个对象时，这个方法最有用了。此外，最妙的是，jQuery能够确保即便你绑定的函数是经过jQuery.proxy()处理过的函数，你依然可以传递原先的函数来准确无误地取消绑定。

这个函数还有另一种用法，jQuery.proxy( scope, name )。第一个参数是要设定的作用域对象。第二个参数是将要设置作用域的函数名（必须是第一个作用域对象的一个属性）。

参数说明：

• function,context   Function,Object

  • function：将要被改变作用域的函数

  • context：一个object，那个函数的作用域会被设置到这个object上来。

• context,name  Object,Object

• • context:一个object，那个函数的作用域会被设置到这个object上来。
  • name：改变上下文中的函数名(这个函数必须是前一个参数 ‘context‘ 对象的属性)

//强制设置函数的作用域，让this指向obj而不是#test对象。

<div id="test">Click Here!</div>

var obj = {
  name: "John",
  test: function() {
    alert( this.name );
    $("#test").unbind("click", obj.test);
  }
};

$("#test").click( jQuery.proxy( obj, "test" ) );

// 以下代码跟上面那句是等价的:
// $("#test").click( jQuery.proxy( obj.test, obj ) );

// 可以与单独执行下面这句做个比较。
// $("#test").click( obj.test );

15. jQuery.contains(container,contained), 一个DOM节点是否包含另一个DOM节点

参数说明：

• container：DOM元素作为容器，可以包含其他元素

• contained：DOM节点，可能被其他元素所包含

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

16. jQuery.type(obj), 检测obj的数据类型

jQuery.type(true) === "boolean"
      
jQuery.type(3) === "number"
        
jQuery.type("test") === "string"
      
jQuery.type(function(){}) === "function"
        
jQuery.type([]) === "array"
      
jQuery.type(new Date()) === "date"
        
jQuery.type(/test/) === "regexp"

17. jQuery.isEmptyObject(obj), 测试对象是否是空对象（不包含任何属性）

jQuery 1.4 新增。jQuery 1.4 中，这个方法既检测对象本身的属性，也检测从原型继承的属性（因此没有使用hasOwnProperty）。

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

18. jQuery.isPlainObject(obj), 测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）

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

19. jQuery.isNumeric(value), 确定它的参数是否是一个数字

jQuery V1.7新增。

$.isNumeric() 方法检查它的参数是否代表一个数值。如果是这样，它返回 true。否则，它返回false。该参数可以是任何类型的

$.isNumeric("-10");  // true
$.isNumeric(16);     // true
$.isNumeric(0xFF);   // true
$.isNumeric("0xFF"); // true
$.isNumeric("8e5");  // true (exponential notation string)
$.isNumeric(3.1415); // true
$.isNumeric(+10);    // true
$.isNumeric(0144);   // true (octal integer literal)
$.isNumeric("");     // false
$.isNumeric({});     // false (empty object)
$.isNumeric(NaN);    // false
$.isNumeric(null);   // false
$.isNumeric(true);   // false
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false

20. jQuery.trim(str), 去掉字符串起始和结尾的空格

$.trim("  hello, how are you?  ");

21. jQuery.param(obj,[traditional]), 将表单元素数组或者对象序列化。是.serialize()的核心方法

在jQuery 1.3中，如果传递的参数是一个函数，那么用.param()会得到这个函数的返回值，而不是把这个函数作为一个字符串来返回。

在jQuery 1.4中，.param()会深度递归一个对象来满足现在脚本语言和框架，比如PHP， Ruby on Rails等。你可以通过jQuery.ajaxSettings.traditional = true; 来全局得禁用这个功能。

注意：因为有些框架在解析序列化数字的时候能力有限，所以当传递一些含有嵌套对象、数组的对象作为参数时，请务必小心！

在jQuery 1.4中，html5的input元素也会被序列化。

参数说明：

• obj  Array<Elements>/jQuery/Object
  • 数组或jQuery对象会按照name/value对进行序列化，普通对象按照key/value对进行序列化
• obj,[traditional]  Array<Elements>/jQuery/Object,Boolean

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

• • traditional：是否使用传统的方式浅层序列化。

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

//width=1680&height=1050

22. jQuery.error(message), 接受一个字符串，并且直接抛出一个包含这个字符串的异常

这个方法的主要目的是提供给插件开发人员，让他们可以重载这个方法，并以更好的方式显示错误，或者提供更多信息。

23. $.fn.jquery, 代表 jQuery 版本号的字符串

.jquery 属性是通过 jQuery 原型赋值的，通过使用它的别名 $.fn 进行引用。它是一个含有 jQuery 版本号的字符串，例如 "1.5.0" 或 "1.4.4".

//判断一个对象是否是 jQuery 对象。
var a = { what: "A regular JS object" },
      b = $(‘body‘);
         if ( a.jquery ) { // falsy, since it‘s undefined
      alert(‘ a is a jQuery object! ‘);
      }    if ( b.jquery ) { // truthy, since it‘s a string
      alert(‘ b is a jQuery object! ‘);
  }

//取得页面上当前使用的 jQuery 的版本号。
alert( ‘You are running jQuery version: ‘ + $.fn.jquery );