.attr( attributeName )
获取第一个匹配的元素的属性的值。
.attr(attributeName)
类型是字符串。
用于获取的属性的名字。
jQuery1.6,没有被设置的属性的元素使用.attr()方法返回的是undefined,另外,.attr()不应该被使用在普通对象,arrays,window或者document上。为了获取和改变DOM元素的properties,使用.prop()方法(见下一篇详细讲解attribute和property的区别)
使用jQuery的.attr()方法来获取元素属性的值有两个主要的优点:
1、便利:它能够直接的在一个jQuery对象上调用并且使用链式结构传递给其他jQuery方法。
2、跨浏览器一致性:一些属性的值被报告在浏览器间不一致,甚至是同一个浏览器的不同版本。.attr()方法减少了这些不一致。
NOTE:属性值一般都是字符串,除了少数一些属性如value和tabindex.
.attr( attributeName, value )
为匹配元素设置一个或多个属性
.attr(attributeName,value)
.attr(attributes)
.attr(attributeName,function(index,attr))
attributeName
类型字符串
用于设置的属性的名字。
value
类型是字符串或者数字。
为属性设置的值。
attributes
类型是普通对象。
一个用于设置的属性和值对的对象。
function(index,attr)
类型是函数。
一个函数返回用来设置的值。this是当前的元素。接收集合中元素的index位置和原来的属性值做为参数。
.attr()方法是一个方便的方式来设置属性的值,特别是设置多了属性值或者使用函数返回的值。如下的image:
<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />
设置简单的属性
改变alt的属性,只要传递属性的名称和它的新的值到.attr()方法中:
$('#greatphoto').attr('alt', 'Beijing Brush Seller');
同样的方式添加一个title属性:
$('#greatphoto')
.attr('title', 'Photo by Kelly Clark');
一次设置不同的属性
同时改变alt的属性值并添加title属性,使用简单javascript对象传递名字和值的集合到方法中。在对象中的每个key-value对来添加或者修改属性
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});
当设置不同的属性时,在属性名周围的引号是可选的。
警告:当设置class属性时,必须使用引号!
NOTE:jQuery禁止在<input>或者<button>上改变属性type,不然会在所有浏览器中会抛出错误。这是因为属性type不能够在IE中被改变。
计算属性值
通过使用函数设置属性,你能够使用这个元素上的其他属性来计算属性值。比如,通过存在的属性值来连接成新的值
$('#greatphoto').attr('title', function(i, val) {
return val + ' - photo by Kelly Clark'
});
当一次性改变多了元素的属性时,这个方法很有用。
NOTE:如果函数(如function(index, attr){}
)没有值,或者undefined被返回,当前的值不会改变。当某些条件被满足的时候,可以有选择的设置。
.removeAttr( attributeName )
移除每一个集合中匹配的元素的属性
.removeAttr(attributeName)
attributeName
类型是字符串。
用来移除的属性。在jQuery1.7中,它可以是有空格隔开的属性列表。
.removeAttr()方法使用了javascript的removeAttribute()函数,但是它的优势是能直接在一个jQuery对象上调用,并且它考虑了浏览器中的不同属性的命名。
NOTE:移除一个内联的onclick事件句柄,在IE6,7,8中使用.removeAttr()不会得到期望的结果,为了避免潜在的问题,使用.prop()替换:
$element.prop("onclick", null);
console.log("onclick property: ", $element[0].onclick);
<script>
//设置页面中所有的<img>的属性
$("img").attr({
src: "/images/hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
</script>
<script>
//根据在页面中的位置设置div的id
$("div").attr("id", function (arr) {
return "div-id" + arr;
})
.each(function () {
$("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
</script>
<script>
//从image的title属性设置其src属性
$("img").attr("src", function() {
return "/images/" + this.title;
});
</script>
<script>
//点击button使在它下一个的input元素可以输入
(function() {
var inputTitle = $("input").attr("title");
$("button").click(function () {
var input = $(this).next();
if ( input.attr("title") == inputTitle ) {
input.removeAttr("title")
} else {
input.attr("title", inputTitle);
}
$("#log").html( "input title is now " + input.attr("title") );
});
})();
</script>