.attr()和.removeAttr()方法操作元素属性_H5之家 - 中国HTML5教程资源分享第一站

今天主要和大家一起分享一下如何使用jQuery的.attr()和.removeAttr()方法读取，添加，修改，删除元素的属性。大家在平时的Web页面制作中都有碰到如何动态的获取元素的属性和属性值，或者说动态的修改元素的某个（某些）属性的属性值。那么jQuery就可以让我们轻松的读取，添加，更改或删除一个（或多个）元素中的任何属性，在jQuery中我们可以使用下面的方法来实现：

.attr()：jQuery中的.attr()方法让你能轻松的读取，增加或修改一个元素的属性（详情参考.attr()）;

.removeAttr():jQuery中的.removeAttr()方法主要用来删除一个元素的一个（或多个）属性（详情参考.removeAttr()）。

下面先来简单看一下.attr()和.removeAttr()两种方法的语法格式：

.attr()方法

.attr()方法有两种功能，第一种是读取元素的属性值，第二个是修改元素的属性值

读取属性的语法

.attr(attributeName );//attributeName 为需要获取的元素的属性名

上面返回的是字符串“string”，值得注意的是.attr()方法只获取第一个匹配元素的属性值，如果你需要每个单独的元素的属性值，需要依靠jQuery的.each()或者.map()方法来实现。

为元素设轩属性值的语法

.attr(attributeName, value);//其中attributeName为元素需要设置的属性名，value是对应的元素值

上面返回的是一个对象，主要用来为指定元素设置一个或多个属性。

.removeAttr()方法 .removeAttr(attributeName);//其中attributeName 是要移除的属性名

.removeAttr()方法使用原生的javaScript中的removeAttribute()函数，但是它的优点是能够直接被jQuery对象访问调用。

上面我们一起简单的了解了一下.attr()和.removeAttr()方法的语法，下面我们一起来看看其具体的应用，首先我们来看一个简单的html Demo：

<a href="http://www.w3cplus.com/">W3cplus</a> <p title="Introduction">Here's some intro text</p> <img src="myphoto.jpg" alt="My Photo" /> <div class="summary">Here's a summary</div>

上面黑体部分显示的就是元素的属性值（元素的属性和属性值都是在HTML标签内）。

获取元素属性值

获取某元素的属性值，其实很简单的。只要使用jQuery中的.attr()方法，通过选择你匹配的元素，并传递他的属性名，这样就可以得到其相匹配的属性值：

$("document").ready(function(){ //显示a.logo元素的"href"的属性值 alert("a链接的href的值是："+$(".logo").attr("href")); });

上面的方法是获取元素的a.logo的href属性值，效果如下：

使用.attr()方法可以轻松帮助你获取你想要元素的某个属性值。此方法可以让你获取匹配元素的属性值，并将此值赋值给另一个元素的上，我们常见的如，把图片转换成另一元素的背景图片，具体请看下面的实例：

HTML Markup

jQuery Code

$("img").load(function(){ $(this).wrap(function(){ return '<div></div>'; }); $(this).css("opacity","0"); });

另外有一点需要注意：如果你的jQuery对像有多个元素，那么.attr()方法只能读取相匹配的第一个元素，而且有jQuery1.6版本中.attr()返回的值是“undefined”。如：

$("document").ready(function(){ alert($(".img").attr()); });

结果：

设置元素的属性值

.attr()不单可以获取元素的属性值，而且还可以通过.attr()方法来添加或修改元素的属性值，比如：

下面我们具体来看这几个方法是如何实现的。

1、给元素设置一个单独的属性/属性值

要添加或修改元素的单一属性，可以通过.attr()方法给元素指定属性名和属性值：

$("document").ready(function(){ $(".logo").attr("href","http://www.sina.com"); });

我们通过Firebug来看看修改前后，a.logo的"href"属性的变化：

你也可以同时给多个元素添加或修改个相同的属性，比如说，给页面所有链接增加一个"target='_blank'"属性：

$("document").ready(function(){ $("a").attr("target","_blank"); });

在来看看Firebug下的变化：

2、使用.attr(map)设置多个属性

你还可以使用.attr(map)方法(其中map就是配对的属性/属性值)同时给一个或多个元素设置多个属性/属性值。具体写法如下所示：

$("selector").attr({ attributeName1: value1, attributeName2: value2, ... attributeNameN: valueN });

下面的实例是给img同时更改两个属性/属性值：

$("document").ready(function(){ $(".img").attr({ "src":"../images/mypic.png", "alt":"My Photo", "width": 100, "height": 100, }); });

我们同样来看其改变前面的代码：

这种方法用来制作图片翻转是很方便的,如：

HTML Markup

jQuery Code:

$("document").ready(function(){ $(".img").hover(function(){ $(this).attr({ "src":"images/b.jpg", "alt":"change the page" }) },function(){ $(this).attr({ "src":"images/a.jpg", "alt":"header" }); }); });

效果：

3、通过回调函数设置属性

另外一种方法是通过回调函数来设置元素的属性值，先来看其主语法形式：

.attr(attributeName,function(index,attr){...});

其中attributeName是需要设置的元素的属性名；而function(index,attr){...}这个函数返回的值用来设置元素指定的属性值，index和attr是指接收元素的索引位置和元素旧的属性值为参数，其中this是指当前元素。