一、attr()概述
在jQuery中，attr()函数是非常常用的函数之一，它用于获取或设置HTML元素的属性值，可以操作HTML元素的标准属性和自定义属性。
在使用attr()函数时，需要注意以下几点：
- 只有指定属性名才能获取或设置属性值，如果属性名不存在，则返回undefined。
- 可以同时设置多个属性的值，需要将属性名及属性值组成一个对象作为参数传入。
//获取title属性的值
title = $("div").attr("title");
//设置title和class属性的值
$("div").attr({
"title": "New Title",
"class": "new-class"
});
二、获取元素属性
attr()函数常用于获取元素的属性值，例如获取input元素的value属性值。
1. 获取标准属性
标准的HTML属性可以使用attr()函数来获取，例如获取input元素的value属性值：
//获取input元素的value属性值
var value = $("input").attr("value");
2. 获取自定义属性
自定义属性也可以使用attr()函数来获取，在HTML标签中添加data-前缀的自定义属性：
//获取div元素的data-id属性值
var id = $("div").attr("data-id");
3. 获取HTML属性
在HTML属性中涉及到特殊字符和空格，需要使用原生属性方法getAttribute()来获取，例如获取input元素的type属性值：
//获取input元素的type属性值
var type = $("input")[0].getAttribute("type");
三、设置元素属性
使用attr()函数设置元素的属性值，可以设置单个或多个属性的值。
1. 设置单个属性
可以设置单个HTML元素的属性值，例如设置input元素的value属性值：
//设置input元素的value属性值
$("input").attr("value", "New Value");
2. 设置多个属性
可以设置多个HTML元素的属性值，需要按照属性名及属性值组成一个对象传入attr()函数，例如同时设置input元素的value和checked属性值：
//同时设置input元素的value和checked属性值
$("input").attr({
"value": "New Value",
"checked": true
});
3. 使用函数设置属性
可以使用函数来设置元素的属性值，函数的入参为元素的index和原始属性值，例如使input元素的value属性值始终为大写：
//使用函数设置input元素的value属性值
$("input").attr("value", function(index, oldValue) {
return oldValue.toUpperCase();
});
四、删除元素属性
当不再需要某个HTML元素的属性时，可以使用removeAttr()函数来删除该元素的属性，例如删除input元素的disabled属性：
//删除input元素的disabled属性
$("input").removeAttr("disabled");
五、总结
attr()函数是jQuery中十分常用的函数之一，可以用于获取或设置HTML元素的属性值，包括标准属性和自定义属性，也可以进行属性值的删除，使用时需要注意不同类型的属性获取和设置方法的不同。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/194774.html
微信扫一扫 
支付宝扫一扫 