jQuery 学习-样式篇（四）：jQuery 设置和删除元素的属性
作者：互联网
本文原文链接：https://blog.csdn.net/xzk9381/article/details/111869886
一、设置、获取和修改属性及属性值
1. 设置单个属性和属性值
使用 $(‘DOM’).attr() 可以设置元素的属性和属性值：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').attr('name','xuzk');
})
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
2. 获取已存在的属性
使用 $(‘DOM’).attr() 也可以判断是否存在该属性，如果存在则返回属性值，如果不存在则返回 undefined：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').attr('name','xuzk');
console.log($('#mydiv').attr('name'));
console.log($('#mydiv').attr('age'));
})
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
3. 重新设置属性值
对于已存在的属性，还可以使用 $(‘DOM’).attr() 重新设置属性值：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').attr('name','xuzk');
console.log($('#mydiv').attr('name'));
$('#mydiv').attr('name','aaron');
console.log($('#mydiv').attr('name'));
})
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
4. 同时设置多个属性值
$(‘DOM’).attr() 也可以同时设置多个属性值，方法是将所有的属性值以 JSON 对象的方式传递进去：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').attr({
'name':'xuzk',
'age':18,
'sex':'male'
});
})
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
5. 使用函数返回值作为属性值
$(‘DOM’).attr() 还支持使用函数的返回值作为属性值：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').attr('age',function (){
return 18;
});
})
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
二、删除属性和属性值
使用 $(‘DOM’).removeAttr() 可以删除指定的属性：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').attr('age','18');
console.log($('#mydiv').attr('age')); // 输出属性值
$('#mydiv').removeAttr('age');
console.log($('#mydiv').attr('age')); // 输出 undefined
})
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
需要注意的是，一次只能删除一个属性，但是可以使用链式操作的办法删除多个属性：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').attr({
'name':'xuzk',
'age':'18'
});
$('#mydiv').removeAttr('age').removeAttr('name');
})
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
本文原文链接：https://blog.csdn.net/xzk9381/article/details/111869886
标签：jQuery,function,attr,删除,样式,mydiv,name,age,属性 来源： https://blog.csdn.net/xzk9381/article/details/111869886