jQuery 源码分析 jQuery.fn.each & jQuery.each - 文章教程

jQuery 源码分析 jQuery.fn.each & jQuery.each

发布于 2021-08-06 字数 4748 浏览 927 评论 0

先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个 red 类

$('div').each(function(index, elem){
  $(this).addClass('red');
});

上面用的的 .each,即 jQuery.fn.each,其内部是通过 jQuery.each 实现的

jQuery.fn.each

先贴一下类官方API说明,非常简单,只有两点需要注意

  1. 上文例子里的 $(this).addClass(‘red’),其中,this 指的是当前操作的dom元素
  2. each 中传入的方法,可以返回任意值,当返回的值为 false 时,跳出当前循环操作
/**
 * @description 对jQuery对象中,匹配的的每个dom元素执行一个方法
 * @param {Number} index 当前处理元素在集合中的位置
 * @param {DOMElement} Element 当前处理的dom元素
*/
.each( function(index, Element) )

下面举两个简单的例子

例子一:

给页面所有的 div 元素添加 red 类

$('div').each(function(index, elem){
  $(this).addClass('red');
});

例子二

给页面前 5 个 div 元素添加 red 类

$('div').each(function(index, elem){
  if(index>=5) return false;  // 跳出循环
  $(this).addClass('red');
});

如上,用法挺简单,不赘述,详细可查看 http://api.jquery.com/each/

源码

内部是通过jQuery.each实现的,下面就讲下jQuery.each的源码,讲完jQuery.each的源码,jQuery.fn.each的源码就很简单了

略。。。

jQuery.each

同样是先上一个简单的例子

$.each([52, 97], function(index, value) {
  alert(index + ': ' + value + ':' + this);
});

输出内容如下:

0: 52-52
1: 97-97

类官方API说明

同样是有两个注意点

  1. 上面例子中的this,是集合中的元素,即下面的 valueOfElement
  2. 在callback中返回false,可以跳出循环
/**
 * @description 对集合(数组或对象)中的每个元素,执行某个操作
 * @param {Number|String} indexInArray 元素在集合中对应的位置(如集合为数组,则为数字;如集合为对象,则为键值)
 * @param {AnyValue} valueOfElement 集合中的元素
*/
jQuery.each( collection, callback(indexInArray, valueOfElement) )

例子一

$.each( ['one,'two','three', 'four'], function(index, value){
  if(index >= 2) return false;
  alert( "Index:" + index + ", value: " + value );
});

例子二

从官网直接copy来的例子,凑合着看

$.each( { name: "John", lang: "JS" }, function(k, v){
  alert( "Key: " + k + ", Value: " + v );
});

源码

// args is for internal usage only
each: function( obj, callback, args ) {
  var value,
    i = 0,
    length = obj.length,
    isArray = isArraylike( obj );   // obj是不是类似数组的对象,比如 {'0':'hello', '1':'world', 'length':2},其实就是为jQuery对象服务啦

  if ( args ) {   // args,其实没发现这个参数有什么实际作用~~直接跳过看else里面的内容即可,除了callback传的参数不同外无其他区别
    if ( isArray ) {
      for ( ; i < length; i++ ) {
        value = callback.apply( obj[ i ], args );

        if ( value === false ) {
          break;
        }
      }
    } else {
      for ( i in obj ) {
        value = callback.apply( obj[ i ], args );

        if ( value === false ) {
          break;
        }
      }
    }

  // A special, fast, case for the most common use of each
  } else {
    if ( isArray ) {  // 处理数组
      for ( ; i < length; i++ ) {
        value = callback.call( obj[ i ], i, obj[ i ] );

        if ( value === false ) {
          break;
        }
      }
    } else {  // 处理对象
      for ( i in obj ) {
        value = callback.call( obj[ i ], i, obj[ i ] ); // value 为callback的返回值

        if ( value === false ) {  // 注意这里,当value===false的时候,直接跳出循环了
          break;
        }
      }
    }
  }

  return obj;
},

迟到的 jQuery.fn.each 源码

的确很简单,只要理解了jQuery.each应该就没问题了,没什么好讲的~

each: function( callback, args ) {
  return jQuery.each( this, callback, args );
},

结束语

与 jQuery.extend、jQuery.fn.extend 一样,虽然 jQuery.each、jQuery.fn.each 代码很简单,但也扮演了相当重要的作用,jQuery 里大量用到了这两个方法,举例:

jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
  class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

所以,少年好好掌握 each 吧~~

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
83580 人气
更多

推荐作者

魏剑帆

文章 0 评论 0

yanggwq

文章 0 评论 0

qq_c2gI5

文章 0 评论 0

qq_iQVWB

文章 0 评论 0