本文实例讲述了jquery分析之jquery.fn.each与jquery.each用法。分享给大家供大家参考。具体分析如下:
先上例子,下面代码的作用是:对每个选中的p元素,都给它们添加一个red类
代码如下:
$('p').each(function(index, elem){
$(this).addclass('red');
}
});
上面用的的.each,即jquery.fn.each,其内部是通过jquery.each实现的
代码如下:
jquery.fn.each
代码如下:
/**
* @description 对jquery对象中,匹配的的每个dom元素执行一个方法
* @param {number} index 当前处理元素在集合中的位置
* @param {domelement} element 当前处理的dom元素
*/
.
.each( function(index, element) )
例子一:
给页面所有的p元素添加red类
代码如下:
$('p').each(function(index, elem){
$(this).addclass('red');
}
});
给页面前5个p元素添加red类
代码如下:
$('p').each(function(index, elem){
if(index>=5) return false; // 跳出循环
$(this).addclass('red');
}
});
源码内部是通过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.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();
}
});
如对本文有疑问, 点击进行留言回复!!
MFC的静态库.lib、动态库.dll(包含引入库.lib)以及Unicode库示例
CTF 刷题记录(一) 白云新闻搜索(手动与自动化SQL注入)
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论