Original link of this article: https://blog.csdn.net/xzk9381/article/details/111869886
1. Set, get and modify attributes and attribute values
1. Set a single attribute and attribute value
Use $('DOM').attr() to set element attributes and attribute values:
<!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. Get existing attributes
Using $('DOM').attr() can also determine whether the attribute exists, if it exists, the attribute value is returned, if it does not exist, it returns 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. Reset the attribute value
For existing attributes, you can also use $('DOM').attr() to reset the attribute value:
<!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. Set multiple attribute values at the same time
$('DOM').attr() can also set multiple attribute values at the same time by passing all attribute values in as JSON objects:
<!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. Use function return value as attribute value
$('DOM').attr() also supports using the return value of a function as an attribute value:
<!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>
Two, delete attributes and attribute values
Use $('DOM').removeAttr() to delete the specified attribute:
<!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>
It should be noted that only one attribute can be deleted at a time, but multiple attributes can be deleted using chain operation:
<!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>
Original link of this article: https://blog.csdn.net/xzk9381/article/details/111869886