each()方法简单明了,有十分强大的遍历功能,可以对一维数组、多维数组、DOM, JSON 等等进行遍历:
each()处理一维数组:
var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
console.info(i);
console.info(val);
});
console.info(i)结果为:0,1,2
console.info(val)结果为:aaa,bbb,ccc
each()处理二维数组:
var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
$.each(item,function(j,val){
console.info(j);
console.info(val);
});
});
console.info(j)结果为:0,1,2,0,1,2,0,1,2
console.info(val)结果为:a,aa,aaa,b,bb,bbb,c,cc,ccc
each处理json数据:
var obj = {
one : 1,
two : 2,
three : 3
};
$.each(obj, function(key, val) {
console.info(key);
console.info(val);
});
console.info(key)结果为:one two three
console.info(val)结果为:one,1,two,2,three,3
网络资源:
ecah处理dom元素,此处以一个input表单元素作为例子。
如果你dom中有一段这样的代码
<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>
然后你使用each如下
$.each($("input:hidden"), function(i,val){
alert(val);
alert(i);
alert(val.name);
alert(val.value);
});
那么,alert(val)将输出[object HTMLInputElement],因为它是一个表单元素。
alert(i)将输出为0,1,2,3
alert(val.name);将输出aaa,bbb,ccc,ddd,如果使用this.name将输出同样的结果
alert(val.value); 将输出111,222,333,444,如果使用this.value将输出同样的结果
如果将以上面一段代码改变成如下的形式
$("input:hidden").each(function(i,val){
alert(i);
alert(val.name);
alert(val.value);
});
可以看到,输出的结果是一样的,至于两种写法究竟区别在哪,我也还不知。此改变运用到上面几段数组的操作也会输出同样的结果。
这样,几个例子的实际结果已经得到答案。接着再继续往下研究,总不能知其然不知其所以然。
从以上的例子中可知jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法。
来自于:http://blog.sina.com.cn/s/blog_7fb1495b0100vcyk.html
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中,用一个attr()就可以全部搞定了,赞一个先 ^^jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式。
1.
2.
3.
4.attr(properties)
html代码结构:
<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
</ul>
1.attr(name)//获取属性的值
1.1 使用attr(name)获取title值:
<script>
alert($("ul li:eq(1)").attr("title"));
</script>
结果:橘子汁
1.2 使用attr(name)获取value值:
<script>
alert($("ul li:eq(1)").attr("value"));
</script>
结果:123
2.
2.1 使用attr(name,value)修改title值为:不吃橘子
<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>
结果:不吃橘子
3.
3.1 把value属性的值设置设给title属性。
<script>
$("ul li:eq(1)").attr("title",function(){ return this.value});
alert($("ul li:eq(1)").attr("title"));
</script>
结果:123
4.attr(properties)
4.1 获取<ul>里第2个<li>设置title和value属性。
<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",value:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("value"));
</script>
结果:不喝橘子汁
4.2 获取<ul>里第2个<li>设置class。
<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>
结果:第二个li的html:<li class="lili" title="橘子汁" value="123">橘子</li>
4.3 获取<ul>里第2个<li>设置id。
<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>
结果:第二个li的html:<li id="lili" title="橘子汁" value="123">橘子</li>
4.4 获取<ul>里第2个<li>设置style。
<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>
那么怎么删除属性呢?
<script>
$("ul li:eq(1)").removeAttr ("title");
</script>
就这么简单, attr