JQuery 学习—$.each遍历学习
来源:互联网 发布:优步抢单软件 编辑:程序博客网 时间:2024/06/06 17:02
生活在这样一个充满欢乐的世界中,我们要有欢乐的精神对待工作和生活!
我们每天晚上睡觉早上起来,每天会重复着做很多的事情,我们的生活在程序的角度看其实就是一个循环,这个循环说简单它就简单,说复杂它就很复杂。今天我要用欢乐的方式来介绍的是JQuery的中的一种技术,JQuery 的$.each遍历操作,不管是搞前端还是搞后端javaWeb方向的程序员(猿),你一定会和它偶遇,在某一个转角。
在通往技术的道路上,一定会听到很多流言蜚语,但是我们一定要坚定自己的信念那就是找到一座灯塔,那个灯塔在我们迷茫徘徊的时候可以指引我们朝着正确的方向,那么在技术中指引我们的灯塔是什么呢?那一定是 官方的文档。
1:文档说明
.each( function(index, Element) ) 返回: jQuery描述: 遍历一个jQuery对象,为每个匹配元素执行一个函数。.each( function(index, Element) ) function(index, Element) 类型: Function() 每个匹配元素执行的一个函数。.each() 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。更重要的是,回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。
假设页面上有这样一个简单的无序列表。
<ul> <li>foo</li> <li>bar</li></ul>
你可以选中并迭代这些列表:
$( "li" ).each(function( index ) { console.log( index + ": "" + $(this).text() );});
列表中每一项会显示在下面的消息中:
0: foo 1: bar
官方的虽然权威,但是有时候会比较抽象和难以理解,为了调节一下气氛,下面我们用轻松的心情来一起吃这些个栗子。
2:详细举例
1 :简单的选择器遍历
简单的选择器遍历,就如上面文档中举例所示,其中选择器可以使用 页面的元素、class、id等
1、选择器+遍历$('div').each(function (i){ i : 就是索引值 this : 表示获取遍历每一个dom对象});2、选择器+遍历$('#testId').each(function (index,domEle){ index : 就是索引值 domEle : 表示获取遍历每一个dom对象});3、更适用的遍历方法1)先获取某个集合对象2)遍历集合对象的每一个元素var data = $(".testClass");$.each(data,function (index,domEle){ data : 是要遍历的集合 index : 就是索引值 domEle : 表示获取遍历每一个dom对象});
2:数组、对象、json属性值遍历
(1):数组的遍历操作,包括一维数组和二维数组。
var array1= [ "王宝强", "陈思成", "好兄弟" ]; //测试一维数组 $.each(array, function(index,data){ console.log(index + data); }); 输出的结果如下: 0 王宝强 1 陈思成 2 好兄弟 //二维数组 var array2 = [['王宝强', '士兵突击', '宝宝加油'], ['陈思成', '北爱', '宝宝好哥们'], ['娱乐圈', '好复杂', '好混乱']]; $.each(array2, function(index, item){ //item相当于取这二维数组中的每一个数组 console.log(index + item); console.log("--" + item[0] + "," +item[1] + "," + item[2] + "--"); }); 输出的结果如下: 0 ['王宝强', '士兵突击', '宝宝加油'] --王宝强,士兵突击,宝宝加油-- 1 ['陈思成', '北爱', '宝宝好哥们'] --陈思成, 北爱, 宝宝好哥们-- 2 ['娱乐圈', '好复杂', '好混乱'] --娱乐圈, 好复杂, 好混乱--
(2)对象的遍历操作
var person = {name : "王宝宝", addr: "北京", stoty : "轰动整个娱乐圈"}; $.each(person ,function(index, data){ console.log("Name: " + index + ", Value: " + data); }); 输出的结果如下: Name: name, Value: 王宝宝 Name: addr, Value: 北京 Name: stoty, Value: 轰动整个娱乐圈
(3)json的遍历操作
var obj = [{ "name": "王宝强", "pwd": "666666"},{ "name": "马蓉", "pwd": "999999"}];$.each(obj ,function(index, data){ console.log("index: " + index + ", name: " + data.name + ", pwd: " + data.pwd); }); 输出结果如下: index: 0, name: 王宝强, pwd: 666666 index: 1, name: 马蓉, pwd: 9999999
吃完栗子,我们应该收收心,做个小小的总结,虽说真正牛逼的人生从来不需要解释,但是在通往牛逼的路上,一定要总结的。
3:总结
JQuery的each遍历在平时开发的项目中用到的还是比较多比较频繁的,不管是在前端,还是在java,php中,这里each的日常使用基本已经介绍了。如需更高深的探索和修炼,请多多看牛人(大神)的技术博客。
4:参考资料
1:JQuery文档
2:jquery的each()详细介绍
最后,我想说:
如果你还有梦想!
如果你还梦想自己的世界会更加精彩!!
如果你还梦想世界因为有你的存在能变得更好一点!!!
那么,请戳这里:极客学院-JQuery系列视频课程
- JQuery 学习—$.each遍历学习
- jQuery学习(一)----each遍历&&hasClass属性
- jQuery学习(一)----each遍历&&hasClass属性
- jQuery each()学习一下
- jquery遍历—$().each和$.each()
- JQuery遍历-$.each()||$().each()
- JQuery学习之each方法
- jQuery 学习笔记之$.each()
- 遍历 jquery $().each 和 $.each()
- 遍历 jquery $().each和$.each()
- jQuery学习03---map,each方法学习
- jQuery 遍历 - each() 方法
- jQuery 遍历 - each() 方法
- JQuery each 遍历
- jQuery 遍历 - each() 方法
- jquery的each遍历
- jQuery 遍历 - each() 方法
- jQuery 遍历 - each() 方法
- 观察者模式
- ehcache 缓存监控
- CodeForces 702A Maximum Increase 水
- 深度学习论文网址
- 让多个子div在父div中水平居中
- JQuery 学习—$.each遍历学习
- java 中int与byte数组转换详解
- 笔试选择题总结3(个人总结)
- iOS中的动力学:Dynamics【1】
- 神经网络的matlab使用
- 学科网产品了解
- trinitycore数据库模块
- 周易六十四卦——睽卦
- Java Hibernate中的悲观锁和乐观锁的实现