你可能会很好奇 :“ 啊在刚开始学习 jQuery 的时候我记得不是学到过一个什么什么迭代吗?哦对是隐式迭代,那个不就是遍历的简单操作嘛,那为什么还要学习遍历呢???”
下面我来给各位好奇宝宝做出解释,我们先想想我们学习隐式迭代是为了什么?是不是为了给相同的元素赋予相同的样式或操作,但是如果我们要给相同的元素赋予不同的操作呢?这怎么办,隐式迭代是不是瞬间就变得束手无策了,这时就需要我们 jQuery 的遍历操作 each( ) 和 $.each 登场了!!!
文章目录:
一:遍历元素 each( )
1.1 each( ) 的使用语法:
1.2 each( ) 的使用方法举例:
结果输出:
二:遍历元素 $.each( )
2.1 $.each( ) 的使用语法:
2.2 $.each( ) 的使用方法举例:
第一个例子 遍历数组:
第二个例子 遍历对象:
三:小结
综上所述:
一:遍历元素 each( )
给同一类元素做相同的操作,我们可以使用 jQuery 的隐式迭代,但是如果想给想遍历操作 DOM 元素并操作元素,就要用到 each() 来遍历我们的元素,下面是 each( ) 的使用语法:
1.1 each( ) 的使用语法:
$( 'ele' ).each( function( index , element ) { xxx } )
each 方法参数为一个回调函数,函数里面有两个参数,第一个参数 index 代表获取的相同元素的索引值(该方法会自动给目标元素设置索引值,不需要手动添加),第二个参数 element 为遍历到的内容
注意!!:遍历到的 element 为 DOM 元素,不能使用 jQuery 的样式操作方法,要转为jQuery 元素才能使用!
1.2 each( ) 的使用方法举例:
此处我们举一个例子来更生动解释其用法,例如我们有三个 div 标签,我们要分别给三个 div 的背景设置不同的颜色,我们该如何操作,首先我们可以设置一个数组里面存放好要设置的三个颜色,再用 each() 去遍历
<body>
<div>111</div>
<div>222</div>
<div>333</div>
<script>
arr=['red','pink','green']
$('div').each(function(index,element){
$(element).css('backgroundColor',arr[index]) //要将element转换为jQuery对象才能使用css方法
})
</script>
</body>
结果输出:
分别设置了不同的背景颜色
二:遍历元素 $.each( )
如果想要遍历获取操作数据,例如对象,数组的遍历,推荐最好来使用 $.each ,下面是 $.each 的使用语法:
2.1 $.each( ) 的使用语法:
$.each( $( 'ele' ) , function( index ,element ){xxxx} )
$.each() 可以遍历任何形式,数组,对象均可遍历,所以如果选择遍历数据我们选择这个方法,其方法的参数有两个,第一个参数为要操作的元素,第二个参数为回调函数,函数里面仍然是两个参数,第一个参数 index 代表获取的相同元素的索引值(该方法会自动给目标元素设置索引值,不需要手动添加),第二个参数 element 为遍历到的内容
注意!!:遍历到的 element 为 DOM 元素,不能使用 jQuery 的样式操作方法,要转为jQuery 元素才能使用!
2.2 $.each( ) 的使用方法举例:
此处我们举几个例子来更生动解释其用法
第一个例子 遍历数组:
<script>
arr=['red','pink','green']
$.each(arr,function(index,element){
console.log(index);
console.log(element);
})
</script>
第二个例子 遍历对象:
这个案例类似于 for in 遍历对象,分别输出了键与值
<script>
$.each({
name:'张三',
age:18
},function(index,element){
console.log(index); //输出属性名
console.log(element); //输出属性值
})
</script>
三:小结
综上所述:
如果我们想要遍历操作DOM元素,我们推荐使用 each( )
如果想要遍历数据,例如对象,数组等等,我们推荐使用 $.each( )