jQuery 属性操作
# jQuery 属性操作
jQuery 提供了许多方便的方法来操作 DOM 元素的属性。以下是常用的属性操作方法：
# 1. 设置或获取元素固有属性值 prop()
prop() 方法用于获取或设置元素的固有属性（如 checked、disabled 等）。
// 获取属性值
var checked = $('input[type="checkbox"]').prop('checked'); // 获取复选框的选中状态
// 设置属性值
$('input[type="checkbox"]').prop('checked', true); // 设置复选框为选中状态
1
2
3
4
5
2
3
4
5
语法：
.prop(propertyName) // 获取属性值
.prop(propertyName, value) // 设置属性值
1
2
2
# 2. 设置或获取元素自定义属性值 attr()
attr() 方法用于获取或设置元素的自定义属性（如 data-* 属性）。
// 获取属性值
var index = $('div').attr('data-index'); // 获取自定义属性 data-index 的值
// 设置属性值
$('div').attr('data-index', '1'); // 设置自定义属性 data-index 的值为 1
1
2
3
4
5
2
3
4
5
语法：
.attr(attributeName) // 获取属性值
.attr(attributeName, value) // 设置属性值
1
2
2
# 3. 数据缓存 data()
data() 方法用于在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。也可以用于读取 HTML5 自定义属性 data-*。
// 附加数据
$('div').data('name', 'value'); // 向被选元素附加数据
// 获取数据
var value = $('div').data('name'); // 向被选元素获取数据
// 读取 HTML5 自定义属性
var index = $('div').data('index'); // 读取 HTML5 自定义属性 data-index 的值
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
语法：
.data(key) // 获取数据
.data(key, value) // 设置数据
1
2
2
# 4. 综合示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 属性操作示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 获取固有属性值
var isChecked = $('#checkbox').prop('checked');
console.log('复选框选中状态:', isChecked);
// 设置固有属性值
$('#checkbox').prop('checked', true);
// 获取自定义属性值
var dataIndex = $('#myDiv').attr('data-index');
console.log('自定义属性 data-index 的值:', dataIndex);
// 设置自定义属性值
$('#myDiv').attr('data-index', '2');
// 附加数据
$('#myDiv').data('name', 'example');
// 获取数据
var dataValue = $('#myDiv').data('name');
console.log('附加数据 name 的值:', dataValue);
// 读取 HTML5 自定义属性
var html5DataIndex = $('#myDiv').data('index');
console.log('HTML5 自定义属性 data-index 的值:', html5DataIndex);
});
</script>
</head>
<body>
<input type="checkbox" id="checkbox">
<div id="myDiv" data-index="1">示例 DIV</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
编辑此页 (opens new window)