对数组遍历
$().each();专门用于遍历jQuery对象;
$.each(object , [callback]) 是jQuery通用遍历方法，可用于遍历对象和数组;
例子：
1.遍历数组，同时使用元素索引和内容
| 代码如下 | 复制代码 |
|
$.each([0,1,2], function(i, n){ console.log('item:'+ i +',value:'+ n); }); |
|
2.遍历对象，同时使用成员名称和变量内容
| 代码如下 | 复制代码 |
|
$.each({name:'chenwei', age:'81'}, function(i, n){ console.log('name:'+ i + ', age:'+ n); }); $.each(array, [callback])遍历 var arr = ['我的111cn.net', '你的mingzi.111cn.net', '我要学java', '什么年代', 'c#', '这是什么', 'vb', 'html', 'css', 'objective-c']; $.grep(array, callback, [invert])过滤,常用 var temp = []; |
|
例子
| 代码如下 | 复制代码 |
|
<input type="checkbox" class="all" /> <input type="checkbox" name="ArrayBox[]" value="1" />a <input type="checkbox" name="ArrayBox[]" value="2" />b <input type="checkbox" name="ArrayBox[]" value="3" />c <button class="selectInverse">全选/反选</button> <script> $('.FullAll').toggle( function({ $(":input[name=ArrayBox[]]").each(function(){ $(this).attr('checked', true); }); }), function({ $(":input[name=ArrayBox[]]").each(function(){ $(this).attr('checked', false); }); }) ); $(":input[name=ArrayBox[]]").each(function(){ $(this).attr('checked', !this.checked); }); }); </script> |
|
以上用到了事件：click, 事件切换：toggle, 表单元素的匹配：input, 设置元素的属性：attr, 数组和对象操作：each;
这里提供一个简单的前台Html代码，后续操作都是对此段Html代码进行的。
| 代码如下 | 复制代码 |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.7.1.min.js"></script> <style type="text/css"> .mySpan { color:red; } </style> </head> <body> <form id="form1" runat="server"> <div> <div id="first_div"> <span class="mySpan" title="first_span" nodeUrl="http://google.com/">first</span> <br /> <span class="mySpan" title="second_span" nodeUrl="http://baidu.com/">second</span> <br /> <span class="mySpan" title="third_span" nodeUrl="http://sina.com/">third</span> </div> <input type="button" name="button" value="Button" onclick="GetObjValueByTitle();" /> </div> </form> </body> </html> |
|
1：通过属性值获取对象
基本结构为：对象类别[属性名='属性值'] 。 例如: span[title='first_span']
| 代码如下 | 复制代码 |
| <script type="text/javascript"> function GetObjValueByTitle() { var obj = $("#first_div span[title='first_span']"); alert(obj.text()); } </script> |
|
2：修改对象的属性值
用到的便是JQuery提供的attr方法，获取属性值的基本结构为：$(obj).attr("属性名")；修改属性值的结构为：$(obj).attr("属性名", "属性值")；
| 代码如下 | 复制代码 |
| <script type="text/javascript"> function ChangeObjAttrValue() { var objs = $("#first_div .mySpan"); $.each(objs, function (index, item) { $(item).attr("title", "haha"); alert($(this).attr("nodeUrl")); // $(this) == $(item) }); } </script> |
|
【注：对于具体的对象我们可以随意添加我们自定义的属性，并且我们可以通过自定义的属性名获取对应的属性值，例如此文中的nodeUrl。】
3：获取并修改对象的Style属性值
用到的便是JQuery提供的css方法，获取style中某个属性的结构为：$(obj).css("属性名")；修改属性值的结构为：$(obj).css("属性名", "属性值")；
| 代码如下 | 复制代码 |
| <script type="text/javascript"> function ChangeObjStyleValue() { var objs = $("#first_div span"); objs.each(function (index, item) { $(item).css("color", "blue"); }); } </script> |
|