本文概述
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) | 它是用于指定返回要设置的属性值的函数的参数。索引:用于接收元素在集合中的索引位置。 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方法。
- 跨浏览器的一致性:你可以摆脱在不同浏览器甚至单个浏览器的不同版本上属性值的不一致更改。
评论前必须登录!
注册