<script type="text/javascript">
$(function() {
$("div").attr("id", function(index) {
//将id设置为序号相关的参数
return "div-id" + index;
}).each(function() {
//找到每一项的span标记
$(this).find("span").html("(id='" + this.id + "')");
});
});
</script>
<div>第0项 <span></span>
</div>
<div>第1项 <span></span>
</div>
<div>第2项 <span></span>
</div>
返回内容:
复制代码 代码如下:
第0项 (id='div-id0')
第1项 (id='div-id1')
第2项 (id='div-id2')
以上代码通过attr(name,fn)将页面中所有的<div>块的id属性值设置为序号相关的参数。并通过each()方法遍历div块,将id值显示在各自的<span>标记中。这可以看到jQuery链的强大。
有的时候对于某些元素,希望同时设置它不同的属性,如果采用上面的方法则需要一个个属性设置。jQuery很人性化, attr()还提供一个列表设置attr(properties)方法。可以设置多个属性。
复制代码 代码如下:
<script type="text/javascript">
$(function() {
$("img").attr({
src: "https://www.jb51.net/article/06.jpg",
title: "名字1",
alt: "名字2"
});
});
</script>
<img>
<img>
<img>
<img>
<img>
执行结果:
复制代码 代码如下:
<img src="https://www.jb51.net/article/06.jpg" title="名字1" alt="名字2">
<img src="https://www.jb51.net/article/06.jpg" title="名字1" alt="名字2">
<img src="https://www.jb51.net/article/06.jpg" title="名字1" alt="名字2">
<img src="https://www.jb51.net/article/06.jpg" title="名字1" alt="名字2">
<img src="https://www.jb51.net/article/06.jpg" title="名字1" alt="名字2">
4.删除属性
当设置某个元素属性的值时,可以通过removeAttr(name)方法将属性值删除。这时元素将恢复默认的设置。例如下面的代码使得所有按钮均不被禁用。
复制代码 代码如下:
$(function() {
$("button").removeAttr("disabled")
});
removeAttr(name)删除属性相当于html标记中不删除该属性。并不是取消了该标记的这个特点。上述代码运行后,所有按钮依然具有设置为禁用的能力。