jQuery源码分析之jQuery.fn.each与jQuery.each用法
更新时间：2015年01月23日 10:20:25 投稿：shichen2014
这篇文章主要介绍了jQuery源码分析之jQuery.fn.each与jQuery.each用法,较为详细的分析了each的用法,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法。分享给大家供大家参考。具体分析如下：
先上例子，下面代码的作用是：对每个选中的div元素，都给它们添加一个red类
复制代码 代码如下:
$('div').each(function(index, elem){
$(this).addClass('red');
}
});
$(this).addClass('red');
}
});
上面用的的.each，即jQuery.fn.each，其内部是通过jQuery.each实现的
复制代码 代码如下:
jQuery.fn.each
先贴一下类官方API说明，非常简单，只有两点需要注意
上文例子里的$(this).addClass('red')，其中，this指的是当前操作的dom元素
each中传入的方法，可以返回任意值，当返回的值为false时，跳出当前循环操作
复制代码 代码如下:
/**
* @description 对jQuery对象中，匹配的的每个dom元素执行一个方法
* @param {Number} index 当前处理元素在集合中的位置
* @param {DOMElement} Element 当前处理的dom元素
*/
.
.each( function(index, Element) )
* @description 对jQuery对象中，匹配的的每个dom元素执行一个方法
* @param {Number} index 当前处理元素在集合中的位置
* @param {DOMElement} Element 当前处理的dom元素
*/
.
.each( function(index, Element) )
下面举两个简单的例子
例子一：
给页面所有的div元素添加red类
复制代码 代码如下:
$('div').each(function(index, elem){
$(this).addClass('red');
}
});
$(this).addClass('red');
}
});
例子二
给页面前5个div元素添加red类
复制代码 代码如下:
$('div').each(function(index, elem){
if(index>=5) return false; // 跳出循环
$(this).addClass('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：
同样是先上一个简单的例子
复制代码 代码如下:
$.each([52, 97], function(index, value) {
alert(index + ': ' + value + ':' + this);
}
});
alert(index + ': ' + value + ':' + this);
}
});
输出内容如下：
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) )
* @description 对集合（数组或对象）中的每个元素，执行某个操作
* @param {Number|String} indexInArray 元素在集合中对应的位置（如集合为数组，则为数字；如集合为对象，则为键值）
* @param {AnyValue} valueOfElement 集合中的元素
*/
j
jQuery.each( collection, callback(indexInArray, valueOfElement) )
例子一
复制代码 代码如下:
$.each( ['one,'two','three', 'four'], function(index, value){
if(index >= 2) return false;
alert( "Index:" + index + ", value: " + 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 );
}
});
alert( "Key: " + k + ", Value: " + v );
}
});
源码：
复制代码 代码如下:
// args is for internal usage only
e
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;
}
},
e
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 );
}
},
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();
}
});
class2type[ "[object " + name + "]" ] = name.toLowerCase();
}
});
所以，好好掌握each！
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
如何使用CSS3和JQuery easing 插件制作绚丽菜单
这篇文章主要介绍了如何使用CSS3和JQuery easing 插件制作绚丽菜单，这样做可以让有菜单的盒子滑出，并且弹出缩略图。在某些菜单项中我们还包含着有进一步链接的子菜单。取决于我们鼠标在菜单项上的停悬，子菜单将向左或向右滑动。,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了jQuery实现的移动端图片缩放功能组件,结合实例形式详细分析了jQuery基于移动端的图片缩放功能组件实现原理、步骤、核心代码及使用技巧,需要的朋友可以参考下2020-05-05
下面小编就为大家带来一篇JQuery页面随滚动条动态加载效果的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
有些时候需要根据浏览器来写样式，所以要判断一下浏览器类型，百度了一下，才知道JQuery有个方法直接判断，并附上原生的js的判断方法，分享给大家，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要介绍了基于jQuery插件jqzoom实现的图片放大镜效果,结合实例形式分析了jQuery插件jqzoom的使用方法与相关注意事项,需要的朋友可以参考下2017-01-01
今天整理了33个使用jQuery与CSS3实现绚丽的鼠标悬停效果，有些是纯CSS3的，这些效果你完全可以用在你的网页上，让网站获得更好的体验2014-12-12
360全景就是视角超过人的正常视角的图像，而我们这里说的全景特指水平视角360度，垂直视角180度的图像。可以全景空间里进行切换，达到浏览各个不同场景360全景展示的目的。2015-03-03
Jquery Easyui分割按钮组件SplitButton使用详解（17）
这篇文章主要为大家详细介绍了Jquery Easyui分割按钮组件SplitButton的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
修改好的jquery滚动字幕效果，需要的朋友可以参考下。2011-06-06
这篇文章主要介绍了jQuery基于ajax实现星星评论代码,可实现实时显示评论效果的功能,基于Ajax实现,非常具有实用价值,需要的朋友可以参考下2015-08-08
最新评论