jQuery源码分析之jQuery.fn.each与jQuery.each用法

本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法。分享给大家供大家参考。具体分析如下：

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

$(this).addClass('red');

}

});

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

代码如下:

先贴一下类官方API说明，非常简单，只有两点需要注意上文例子里的$(this).addClass('red')，其中，this指的是当前操作的dom元素 each中传入的方法，可以返回任意值，当返回的值为false时，跳出当前循环操作

代码如下:

@description 对jQuery对象中，匹配的的每个dom元素执行一个方法

@param {Number} index 当前处理元素在集合中的位置

@param {DOMElement} Element 当前处理的dom元素

*/
.
.each( function(index,Element) )

下面举两个简单的例子

例子一：

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

代码如下:

$(this).addClass('red');

}

});

例子二

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

代码如下:

if(index>=5) return false; // 跳出循环

$(this).addClass('red');

}

});

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

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

jQuery.each：

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

代码如下:

输出内容如下：

0: 52-52 1 1: 97-97

类官方API说明

同样是有两个注意点

上面例子中的this，是集合中的元素，即下面的 valueOfElement 在callback中返回false，可以跳出循环

代码如下:

@description 对集合（数组或对象）中的每个元素，执行某个操作

@param {Number|String} indexInArray 元素在集合中对应的位置（如集合为数组，则为数字；如集合为对象，则为键值）

@param {AnyValue} valueOfElement 集合中的元素

*/
j
jQuery.each( collection,callback(indexInArray,valueOfElement) )

例子一
<div class="codetitle"><a style="CURSOR: pointer" data="17965" class="copybut" id="copybut17965" onclick="doCopy('code17965')"> 代码如下:

<div class="codebody" id="code17965">$.each( ['one,'two','three','four'],value){

if(index >= 2) return false;

alert( "Index:" + index + ",value: " + value );
}
});

例子二

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

@L_502_8@ 代码如下:

alert( "Key: " + k + ",Value: " + v );

}

});

源码：
<div class="codetitle"><a style="CURSOR: pointer" data="84189" class="copybut" id="copybut84189" onclick="doCopy('code84189')"> 代码如下:

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 ],obj[ i ] ); // value 为callback的返回值
if ( value === false ) { // 注意这里，当value===false的时候，直接跳出循环了
break;
}
}
}
}
return obj;
}
},

jQuery源码分析之jQuery.fn.each与jQuery.each用法

猜你在找的jQuery相关文章