1. 技术文章
  2. jQuery中的工具（九）

jQuery中的工具（九）

由 萝らか妹 提交于 2019-12-03 09:21:17

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. 

 

标签
test
jquery
jquery数组
对象数组
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!