jquery.each,jquery each函数

jquery.each,jquery each函数,jQuery中的each()详细介绍(推荐)

jquery中的Each()非常好用,用起来很爽。下面小编来介绍一下jquery中each()的用法。有兴趣的朋友来看看吧。

Each()方法可以使DOM循环结构简洁,不易出错。每个()函数都封装了一个非常强大的遍历函数,并且易于使用。可以遍历一维数组,多维数组,DOM,JSON等等。

在javaScript开发中使用$each可以大大减少我们的工作量。

下面提一下each的几种常用的用法

each处理一维数组

var arr1=[ 'aaa ',' bbb ',' CCC '];

$.每个(arr1,函数(I,val){

警报(一);

警报(val);

});

警报(I)将输出0,1,2

警报(val)将输出aaa、bbb和ccc。

each处理二维数组

var arr 2=[' a ',' aa ',' aaa'],['b ',' bb'],['c ',' cc ',' ccc']]

$.每个(arr,function(i,item){

警报(一);

警报(项目);

});

Arr2是一个二维数组,item相当于取这些二维数组中的每一个。

Item[0]相对于获取每个一维数组中的第一个值。

Alert(i)将输出0,1,2,因为这个二维数组包含三个数组元素。

警报(项目)将输出为['a ',' aa ',' aaa'],['b ',' bb ',' bbb'],['c ',' cc ',' ccc']

在这个两位数组的处理过程中稍作改变后

var arr=[' a ',' aa ',' aaa'],['b ',' bb'],['c ',' cc ',' ccc']]

$.每个(arr,function(i,item){

$.每个(项目,函数(j,val){

alert(j);

警报(val);

});

});

Alert(j)将输出0,1,2,0,1,2,0,1,2。

警报(val)将输出为A、aa、aaa、B、bb、bbb、C、cc、ccc

每个都处理json数据,而且每个都更加强大。它可以循环每个属性。

var obj={一:1,二:2,三:3 };

each(obj,function(key,val) {

警报(键);

警报(val);

});

这里alert(键)会输出一二三。

Alert(val)将输出一、一、二、二、三、三

为什么这里的键不是数字而是属性?因为json格式是一组无序的属性值。既然是无序的,就没有编号。

而这个val相当于obj[key]

Ecah处理dom元素。这里,以输入表单元素为例。

如果您的dom中有这样的代码

input name=' AAA ' type=' hidden ' value=' 111 '/

input name=' BBB ' type=' hidden ' value=' 222 '/

输入名称='ccc '类型='隐藏'值='333' /

输入名称='ddd '类型='hidden '值='444'/

然后,您可以按如下方式使用每种方法

$.each($('input:hidden '),function(i,val){

警报(val);

警报(一);

alert(val . name);

警报(值);

});

然后,alert(val)会输出[object HTMLInputElement],因为它是一个表单元素。

警报(I)将输出为0,1,2,3

alert(val . name);Aaa,bbb,ccc,ddd都会输出。如果使用this.name,将输出相同的结果。

警报(值);将输出111,222,333,444,如果使用此值,将输出相同的结果。

如果将上述代码更改为以下形式

$('input:hidden ')。每个(函数(I,val){

警报(一);

alert(val . name);

警报(值);

});

如你所见,输出结果是一样的,我还是不知道两种写法的区别。将此更改应用到上述数组的操作也将输出相同的结果。

就这样,回答了几个例子的实际结果。然后继续研究,总是不能知道为什么。

从上面的例子可以看出,jQuery和jQuery对象都实现了这个方法。对于jQuery对象,每个方法都是简单的委托:jQuery对象作为第一个参数传递给jQuery的每个方法。

看下jQuery中的each实现(网络摘抄)

函数(对象、回调、参数){

//这个方法有三个参数:要操作的对象obj,要操作的函数fn,函数的参数args。

var name,i=0,length=object.length

if (args) {

if (length==undefined) {

对于(对象中的名称){

if (callback.apply(object[name],args)==false){

打破;

}

}

}否则{

for(;I长度;) {

if (callback.apply(object[i ],args)==false){

打破;

}

}

}

}否则{

if (length==undefined) {

对于(对象中的名称){

if (callback.call(object[name],name,object[name])===false) {

打破;

}

}

}否则{

for(var value=object[0];I长度callback.call(value,I,value)!==假;value=object[ i]) {}

/*object[0]获取jQuery对象中的第一个DOM元素,通过for循环,

遍历整个jQuery对象对应的每个DOM元素,传递callback.call( value,I,value);

将回调的这个对象指向value对象,传递两个参数,I代表索引值,value代表DOM元素;

其中回调是一个类似于function(index,elem) {.}.

所以你得到$(' . ')).每个(函数(索引,元素){.});

*/

}

}

返回对象;

}

Jquery会根据传入的元素自动判断,然后根据判断结果采取apply或call方法。在fn的实现中,可以直接使用这个指针来引用数组或者对象的子元素。

1.obj对象是数组

每个方法都会逐个调用数组中子元素的fn函数,直到调用一个子元素返回的结果为false。也就是说,我们可以对提供的fn函数进行处理,使其满足一定的条件,然后退出每个方法调用。每个方法提供arg参数时,fn函数调用传入的参数是arg;否则就是:子元素索引,子元素本身。

2.obj 对象不是数组

这种方法和1最大的区别是fn方法会连续进行,不考虑返回值。也就是说,obj对象的所有属性都会被fn方法调用,即使fn函数返回false。调用传递的参数类似于1。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用jquery实现图片轮播效果如何,jQuery图片轮播
  • 使用jquery实现图片轮播效果如何,jQuery图片轮播,使用jQuery实现图片轮播效果
  • 举例说明jquery中each函数的使用,jquery each()
  • 举例说明jquery中each函数的使用,jquery each(),JQuery中each()的使用方法说明
  • 一篇文章带你了解jquery动画人物,一篇文章带你了解jquery动画制作
  • 一篇文章带你了解jquery动画人物,jquery的动画,一篇文章带你了解jQuery动画
  • trigger的用法总结,jquery trigger 传参数
  • trigger的用法总结,jquery trigger 传参数,jQuery中值得注意的trigger方法浅析
  • js hover 触发事件显示另一元素,js hover 触发事件,jQuery中多个元素的Hover事件解决方案
  • js apply 实现原理,jquery apply用法_1
  • js apply 实现原理,jquery apply用法
  • js apply 实现原理,jquery apply用法,js中apply方法的使用详细解析
  • js apply 实现原理,jquery apply用法,JS中apply()的应用实例分析
  • jq获取radio选中的值,jquery radio 取值
  • jq获取radio选中的值,jquery radio 取值,Jquery获取radio选中值实例总结
  • 留言与评论(共有 条评论)
       
    验证码: