attr()是jQuery中非常重要的一个方法，用于获取或设置HTML元素的属性值。本文将深入探讨attr()的使用，包括其基本语法、常见用法以及最佳实践。
基本语法
attr()方法有两个参数：
$(selector).attr(attributeName, value)
其中，attributeName表示要操作的属性名，value表示要设置的值。如果不传递value参数，则attr()方法返回指定属性的当前值。
常见用法
获取和设置属性值
可以使用attr()方法来获取和设置一个元素的属性值。例如，要获取一个元素的src属性值，可以这样写：
var src = $("img").attr("src");要设置一个元素的src属性值，可以这样写：
$("img").attr("src", "new_image.jpg");删除属性
可以使用removeAttr()方法来删除一个元素的属性。例如，要删除一个元素的class属性，可以这样写：
$("div").removeAttr("class");操作自定义属性
除了可以操作HTML标准属性外，attr()方法还可以操作自定义属性。例如，要获取一个元素的自定义属性data-id的值，可以这样写：
var dataId = $("div").attr("data-id");要设置一个元素的自定义属性data-id的值，可以这样写：
$("div").attr("data-id", "12345");操作多个元素的属性
attr()方法也可以用于同时操作多个元素的属性。例如，要同时将两个链接的href属性值设置为相同的URL，可以这样写：
$("a.link1, a.link2").attr("href", "http://example.com");最佳实践
以下是一些使用attr()方法时应遵循的最佳实践：
- 尽可能使用HTML5规定的自定义数据属性（以
data-开头），而不是添加非标准属性。 - 不要直接在HTML中使用JavaScript事件处理程序。而是在JavaScript代码中使用
attr()方法来绑定事件处理程序。 - 避免频繁地获取和设置属性值。如果需要对同一个属性进行多次操作，请考虑将其存储在变量中，以提高性能。
示例代码
下面是一些使用attr()方法的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ------ ------ --------------- -------- ----------------------------------------------------------- --------- ------------------------------- ----- --- --- ----- -- --- ----- --------- -- -- ----- ------ --- - --------------------- -------------------- ----- --- --- ----- --------- -- -- ----- -- - --- --- ----------------------- ----------------- ----- ------ --- ------- --------- ---- - --- -------------------------------- ----- --- --- ----- -- - ------ --------- --------- ------ ------ - ------------------------- ----------------------- ----- --- --- ----- -- - ------ --------- --------- --------------------------- --------- ----- --- --- ------ --------- -- --- ----- -- --- ---- --- -------------- ---------------------- ---------------------- ----- ---------- ------- ------ ----- ---------------- ----- -------------------- ------------- --- ------------- ------------- ----- --- ------------- ------------- ----- ------- -------
以上就是attr()方法的使用小结，希望能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2822