你可能会很好奇：“ 啊在刚开始学习 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( )

jQuery each( ) 遍历与 $.each( ) 遍历【一篇文章轻松拿下】相关推荐

一篇文章轻松搞定SpringSecurity权限框架！
目录前言一.引入依赖二.提供正常的业务接口三.自定义用户认证 3.1 编写配置类 3.2 编写UserDetailsService实现类 3.3 启动项目,完成认证功能的验证 3.4 小说明 ...
一篇文章轻松学会python装饰器
1. 函数在python中,函数通过def关键字.函数名和可选的参数列表定义.通过return关键字返回值.我们举例来说明如何定义和调用一个简单的函数: >>> def foo() ...
一篇文章轻松搞懂 AC自动机
索引概念前后缀匹配 Trie树 AC自动机的实现初始化 Fail指针的构建匹配字符串一名蒟蒻向您问好. 概念这是 AC自动机,不是自动AC机, 是一个十分常用的多模式字符串匹配算法 (也就 ...
软件的六种设计原则一篇文章轻松Get
文章目录一. 开闭原则二.里氏代换原则三.依赖倒转原则四.接口隔离原则五.迪米特法则六.合成复用原则七.总结妈妈,长大了我想学设计模式!
二叉树？深度优先，广度优先遍历，一篇文章搞定（图解+代码+详细思路）
欢迎关注微信公众号:简说Python 关注后回复:1024,可以进学习进学习交流群. 这两天和几个朋友组了个互相督促学习群,想着督促一下自己学习,也督促自己的原创输出,其实很多时候都是懒,真不是没有东 ...
jquery 对 Json 的各种遍历
原文链接: http://caibaojian.com/jquery-each-json.html 概述 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式, ...
【jQuery笔记Part3】01-jQuery-each遍历
each遍历静态方法:jQuery.each(object, [callback]) 对象方法:$().each(callback) 遍历数组 javaScript 中的遍历数组静态方法遍历数组 ...
Jquery（四）对象遍历及特效
Jquery(四)对象遍历及特效一.jQuery 对象遍历 1.children('selector') 2.find('selector') 3.next() 4.nextAll() 5.pare ...
jQuery的认识和使用（jQuery选择器、事件、遍历、效果）
修改时间:2021年1月27日作者:pp_x 邮箱:pp_x12138@163.com 文章目录 jQuery jQuery介绍 jQuery能做什么 jQuery的优势 jQuery的基础语法 j ...

jQuery each( ) 遍历与 $.each( ) 遍历【一篇文章轻松拿下】

文章目录：

一：遍历元素 each( )

1.1 each( ) 的使用语法：

$( 'ele' ).each( function( index , element ) { xxx } )

1.2 each( ) 的使用方法举例：

结果输出：

二：遍历元素 $.each( )

2.1 $.each( ) 的使用语法：

$.each( $( 'ele' ) , function( index ,element ){xxxx} )

2.2 $.each( ) 的使用方法举例：

第一个例子遍历数组：

第二个例子遍历对象：

三：小结

综上所述：

jQuery each( ) 遍历与 $.each( ) 遍历【一篇文章轻松拿下】相关推荐

最新文章

热门文章

jQuery each( ) 遍历 与 $.each( ) 遍历【一篇文章轻松拿下】

文章目录：

一：遍历元素 each( )

1.1 each( ) 的使用语法：

$( 'ele' ).each( function( index , element ) { xxx } )

1.2 each( ) 的使用方法举例：

结果输出：

二：遍历元素 $.each( )

2.1 $.each( ) 的使用语法：

$.each( $( 'ele' ) , function( index ,element ){xxxx} )

2.2 $.each( ) 的使用方法举例：

第一个例子 遍历数组：

第二个例子 遍历对象：

三：小结

综上所述：

jQuery each( ) 遍历 与 $.each( ) 遍历【一篇文章轻松拿下】相关推荐

最新文章

热门文章

jQuery each( ) 遍历与 $.each( ) 遍历【一篇文章轻松拿下】

第一个例子遍历数组：

第二个例子遍历对象：

jQuery each( ) 遍历与 $.each( ) 遍历【一篇文章轻松拿下】相关推荐