视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery源码分析之jQuery.fn.each与jQuery.each用法_jquery
2020-11-27 21:33:24 责编:小采
文档


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

先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类
代码如下:$('div').each(function(index, elem){

$(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) )
下面举两个简单的例子

例子一:

给页面所有的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
1: 97-97

类官方API说明

同样是有两个注意点

上面例子中的this,是集合中的元素,即下面的 valueOfElement
在callback中返回false,可以跳出循环
代码如下:/**

* @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 );
}
});
例子二

从官网直接copy来的例子,凑合着看
代码如下:$.each( { name: "John", lang: "JS" }, function(k, 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;
}
},


迟到的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!

希望本文所述对大家的jQuery程序设计有所帮助。

下载本文
显示全文
专题