jQuery 元素操作
# jQuery 元素操作
jQuery 提供了丰富的元素操作方法，包括遍历、创建、添加和删除元素。以下是常用的元素操作方法：
# 1. 遍历元素
# 1.1 遍历匹配的每一个元素
$("div").each(function (index, domEle) {
// 回调函数
// index 是每个元素的索引号
// domEle 是每个 DOM 元素对象，不是 jQuery 对象
// 如果需要使用 jQuery 方法，需要将 domEle 转换为 jQuery 对象
$(domEle).css('color', 'red'); // 设置每个 div 的字体颜色为红色
});
1
2
3
4
5
6
7
2
3
4
5
6
7
语法：
$("选择器").each(function (索引号, DOM元素) {
// 对每个匹配的元素执行的操作
});
1
2
3
2
3
# 1.2 遍历任何对象
$.each([1, 2, 3], function (index, value) {
// index 是每个元素的索引号
// value 是每个元素的值
console.log(index + ": " + value);
});
1
2
3
4
5
2
3
4
5
语法：
$.each(对象, function (索引号, 元素) {
// 对每个对象的元素执行的操作
});
1
2
3
2
3
# 2. 创建元素
使用 jQuery 创建新的 HTML 元素。
$('<li></li>'); // 创建一个新的 <li> 元素
1
语法：
$('<标签名></标签名>')
1
# 3. 添加元素
# 3.1 内部添加元素
// 把内容放入匹配元素内部最后面，类似原生 appendChild
$('ul').append('<li>最后一项</li>');
// 把内容放入匹配元素内部最前面
$('ul').prepend('<li>第一项</li>');
//内部添加元素，生成之后，它们是父子关系。
1
2
3
4
5
6
7
2
3
4
5
6
7
语法：
元素.append(内容) // 在匹配元素内部的最后添加内容
元素.prepend(内容) // 在匹配元素内部的最前添加内容
1
2
2
# 3.2 外部添加元素
// 把内容放入目标元素后面
$('ul li:first').after('<li>第二项</li>');
// 把内容放入目标元素前面
$('ul li:last').before('<li>倒数第二项</li>');
// 外部添加元素，生成之后，他们是兄弟关系。
1
2
3
4
5
6
7
2
3
4
5
6
7
语法：
元素.after(内容) // 在目标元素后面添加内容
元素.before(内容) // 在目标元素前面添加内容
1
2
2
# 4. 删除元素
// 删除匹配的元素（本身）
$('li').remove();
// 删除匹配的元素集合中所有的子节点
$('ul').empty();
// 清空匹配的元素内容
$('ul').html('');
// ① remove 删除元素本身。
// ② empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
语法：
元素.remove() // 删除匹配的元素本身
元素.empty() // 删除匹配的元素集合中的所有子节点
元素.html('') // 清空匹配的元素内容
1
2
3
2
3
# 5. 综合示例
<!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() {
// 遍历匹配的每一个 div 元素并设置字体颜色为红色
$("div").each(function (index, domEle) {
$(domEle).css('color', 'red');
});
// 遍历数组并输出索引和值
$.each([1, 2, 3], function (index, value) {
console.log(index + ": " + value);
});
// 创建新的 <li> 元素并添加到 <ul> 内部的最后
$('ul').append('<li>最后一项</li>');
// 在 <ul> 内部的最前添加新的 <li> 元素
$('ul').prepend('<li>第一项</li>');
// 在第一个 <li> 元素后面添加新的 <li> 元素
$('ul li:first').after('<li>第二项</li>');
// 在最后一个 <li> 元素前面添加新的 <li> 元素
$('ul li:last').before('<li>倒数第二项</li>');
// 删除所有 <li> 元素
$('li').remove();
// 删除 <ul> 内部的所有子节点
$('ul').empty();
// 清空 <ul> 内部的内容
$('ul').html('');
});
</script>
</head>
<body>
<div>第一个 div</div>
<div>第二个 div</div>
<ul>
<li>第一个项目</li>
<li>第二个项目</li>
</ul>
</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
41
42
43
44
45
46
47
48
49
50
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
41
42
43
44
45
46
47
48
49
50
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08