jQuery使用之标记元素属性用法实例(2)

<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标记中不删除该属性。并不是取消了该标记的这个特点。上述代码运行后,所有按钮依然具有设置为禁用的能力。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxwgj.html