极客笔记jQuery attr()方法
jQuery attr()方法用于设置或返回所选元素的属性和值。
jQuery attr()方法有两种用法。
- 返回属性值 ：该方法返回第一个匹配元素的值。
- 设置属性值 ：该方法用于设置一或多个匹配元素的属性/值对。
语法 ：
返回属性值的语法：
$(selector).attr(attribute)
设置属性和值：
$(selector).attr(attribute,value)
通过使用函数设置属性和值：
$(selector).attr(attribute,function(index,currentvalue))
设置多个属性和值：
$(selector).attr({attribute:value, attribute:value,...})
jQuery的attr()方法的参数
| 参数 | 描述 |
|---|---|
| attribute | 此参数用于指定属性的名称。 |
| value | 此参数用于指定属性的值。 |
| function(index,currentvalue) | 此参数用于指定一个返回要设置的属性值的函数。 |
- index： 用于接收元素在集合中的索引位置。
- currentvalue： 用于提供所选元素的当前属性值。
jQuery的attr()方法示例
让我们举一个例子来演示jQuery的attr()方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
(document).ready(function(){("button").click(function(){
$("img").attr("width", "500");
});
});
</script>
</head>
<body>
<img src="good-morning.jpg" alt="Good Morning Friends"width="284" height="213"><br>
<button>Set the width attribute of the image</button>
</body>
</html>
使用jQuery attr()方法的好处
它提供了两个主要的好处：
- 便利性： 当您使用jQuery attr()方法来获取元素的属性值时，它可以直接在一个jQuery对象上调用，并链接到其他jQuery方法。
- 跨浏览器一致性： 您可以摆脱不同浏览器甚至同一浏览器不同版本对属性值的不一致性变化。