jQuery 的 DOM 操作-上-阿里云开发者社区

jQuery 的 DOM 操作

查找节点, 修改属性

查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值

应用实例

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>操作节点的属性</title>
6. <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
7. <script type="text/javascript">
8.         $(function () {
9. //给button绑定一个click事件
10.             $("button").click(function () {
11.                 $("img").attr("src", "../image/1.png");
12.                 $("img").attr("height", "200");
13.             })
14.         });
15. </script>
16. </head>
17. <body>
18. <img src="../image/2.png" height="100"/>
19. <br/>
20. <button>设置图像的 height 属性</button>
21. </body>
22. </html>

创建节点

● 创建节点介绍

1.创建节点: 使用 jQuery 的工厂函数 $(): $(html标签); 会根据传入的 html 标记字符串创建一个 jQuery 对象, 并返回

2.动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;

3.当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式.

例如创建一个元素, 可以使用 $("") 或 $(""), 但不能使用 $("") 或 $("")

4.创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

● 第 1 组方法(内部插入法)

1.append(content) :向每个匹配的元素的内部的结尾处追加内容, 举例 A.append(B)

(1) A, B 都是jquery对象,

(2) 表示把B对象插入到A对象内部的结尾处

(3) 结果是: B对象成为A对象的子元素/节点

2.appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 , 举例A.appendTo(B)

解读

(1) A, B都是jquery对象

(2) 表示把 A对象插入到B对象内部结尾处

(3)结果是 A对象成为B对象的子元素/节点

3.prepend(content):向每个匹配的元素的内部的开始处插入内容, 举例说明 A.prepend(B)

解读

(1) A, B都是jquery对象,

(2) 表示把B对象插入到A对象内部的开始处,

(3) 结果 B成为A的子元素/节点

4.prependTo(content) :将每个匹配的元素插入到指定的元素内部的, 举例说明A.prependTo(B)

解读

(1) A, B都是jquery对象

(2) 表示把A对象插入到B对象内部的开始处

(3) 结果 A成为B的子元素/节点

5.说明: 内部插入法是在元素内插入内容(该内容变成该元素的子元素或节点)

● 第 2 组方法(外部插入法)

1.after(content) :在每个匹配的元素之后插入内容 , 举例说明 A.after(B)

解读

(1) A,B都是jquery对象

(2) 表示B对象插入到A对象后面

(3) 结果:B成为A的兄弟节点

2.before(content):在每个匹配的元素之前插入内容, 举例 A.before(B)

解读

(1)A, B都是jquery对象

(2) 表示B对象插入到A对象前面

(3) 结果是 B成为A的兄弟节点，并且在A的前面

3.insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面 , 举例说明 A.insertAfter(B)

解读(1) A, B都是jquery对象

(2) 表示把A对象插入到B对象的后面

(3) 结果：A成为B的后一个兄弟节点

4.insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面,举例 A.insertBefore(B),

解读 (1) A, B都是jquery对象

(2) 表示把A对象插入到B对象的前面

(3) 结果是 A成为B的前一个兄弟

5.说明: 外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)

6. 注意: 以上方法不但能将新的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动(可以完成很多需求.).

创建节点-应用实例之添加

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>创建节点-应用实例</title>
6. <style type="text/css">
7. div, span {
8. width: 140px;
9. height: 140px;
10. margin: 20px;
11. background: #9999CC;
12. border: #000 1px solid;
13. float: left;
14. font-size: 17px;
15. font-family: Roman;
16.         }
17. 
18. div.mini {
19. width: 30px;
20. height: 30px;
21. background: #CC66FF;
22. border: #000 1px solid;
23. font-size: 12px;
24. font-family: Roman;
25.         }
26. </style>
27. <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
28. <script type="text/javascript">
29. 
30.         $(function () {
31. //添加重庆li到上海下(使用dom的传统方法)
32.             $("#b1").click(function () {
33. //1. 创建重庆li
34. var cq_li = document.createElement("li");
35. //2. 设置属性和内容
36.                 cq_li.setAttribute("id", "cq");
37.                 cq_li.setAttribute("name", "chongqing");
38.                 cq_li.innerText = "重庆";
39. //3. 添加到指定元素后面
40. document.getElementById("sh").append(cq_li);
41.             })
42. 
43. //*****添加重庆li到 上海下-jquery完成添加节点
44.             $("#b2").click(function () {
45. //创建好重庆li
46. var $cq_li = $("<li id=\"cq\" name=\"chongqing\">重庆~</li>");
47. //内部插入法append
48. //$("#sh").append($cq_li);
49. //外部插入法
50.                 $("#sh").after($cq_li);//推荐...
51. //$cq_li.insertAfter($("#sh"));
52.             })
53. 
54. 
55. //*** 添加成都li到 北京前
56.             $("#b3").click(function () {
57. //创建成都li
58. var $cd_li = $("<li id=\"cd\" name=\"chengdou\">成都</li>");
59. //添加到北京li前面-玩一把[感受外部插入和内部插入区别]
60. //$("#bj").prepend($cd_li);//内部插入
61.                 $("#bj").before($cd_li);//外部插入
62.             })
63. 
64. //*** 添加成都li到 北京和上海之间
65.             $("#b4").click(function () {
66. //创建成都li
67. var $cd_li = $("<li id=\"cd\" name=\"chengdou\">成都~~~~</li>");
68. //外部插入
69. //$("#bj").after($cd_li);
70.                 $("#sh").before($cd_li);
71.             })
72. 
73. //*** 添加成都li到 吉林前面
74.             $("#b5").click(function () {
75. //创建成都li
76. var $cd_li = $("<li id=\"cd\" name=\"chengdou\">成都#</li>");
77. //外部插入
78.                 $("#jl").before($cd_li);//推荐
79. //$cd_li.insertBefore($("#jl"));
80.             })
81. 
82.         })
83. </script>
84. </head>
85. <body>
86. <ul id="city">
87. <li id="bj" name="beijing">北京</li>
88. <li id="sh" name="shanghai">上海</li>
89. <li id="jl" name="jilin">吉林</li>
90. <li id="my" name="mianyang">绵阳</li>
91. </ul>
92. 
93. <input type="button" id="b1" value="添加重庆li到 上海下(使用dom的传统方法)"/><br/><br/>
94. <input type="button" id="b2" value="添加重庆li到 上海下"/><br/><br/>
95. <input type="button" id="b3" value="添加成都li到 北京前"/><br/><br/>
96. <input type="button" id="b4" value="添加成都li到 北京和上海之间"/><br/><br/>
97. <input type="button" id="b5" value="添加成都li到 吉林前面"/><br/>
98. 
99. </body>
100. </html>

创建节点-应用实例之移动

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>移动节点</title>
6. <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
7. <script type="text/javascript">
8.         $(function () {
9. //****使用外部插入法 把反恐li移动天津后
10.             $("#b1").click(function () {
11.                 $("#tj").after($("#fk"));
12.             })
13. 
14. //****使用内部插入法 把反恐li移动天津后
15.             $("#b2").click(function () {
16.                 $("#tj").append($("#fk"));
17.             })
18. 
19.         })
20. </script>
21. </head>
22. <body>
23. 您喜欢的城市:<br>
24. <ul id="city">
25. <li id="bj" name="beijing">北京</li>
26. <li id="sh" name="shanghai">上海</li>
27. <li id="tj" name="tianjin">天津</li>
28. </ul>
29. 
30. 您爱好的游戏:<br>
31. <ul id="game">
32. <li id="fk" name="fakong">反恐</li>
33. <li id="cq" name="chuangqi">传奇</li>
34. </ul>
35. <input type="button" id="b1" value="使用after插入法 把反恐li移动天津后"/><br/><br/>
36. <input type="button" id="b2" value="使用append插入法 把反恐li移动天津后"/><br/><br/>
37. </body>
38. </html>

删除节点

● 删除节点介绍

remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素.

当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.

empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)

应用实例

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>删除节点-应用实例</title>
6. <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
7. <script type="text/javascript">
8.         $(function () {
9. //*****删除所有p
10.             $("#b1").click(function () {
11.                 $("p").remove();
12.             })
13. //***所有p清空
14.             $("#b2").click(function () {
15.                 $("p").empty();
16.             })
17. //****删除上海这个li
18.             $("#b3").click(function (){
19.                 $("#sh").remove();
20.             })
21.         });
22. </script>
23. </head>
24. <body>
25. 您喜欢的城市:<br>
26. <ul id="city">
27. <li id="bj" name="beijing">北京</li>
28. <li id="sh" name="shanghai">上海</li>
29. <li id="tj" name="tianjin">天津</li>
30. </ul>
31. 
32. 您爱好的游戏:<br>
33. <ul id="game">
34. <li id="fk" name="fakong">反恐</li>
35. <li id="cq" name="chuangqi">传奇</li>
36. </ul>
37. 
38. <p>Hello</p> how are <p>you?</p>
39. 
40. 
41. <p name="test">Hello, <span>Person</span> <a href="#">and person</a></p>
42. 
43. <input type="button" value="删除所有p" id="b1"/>
44. <input type="button" value="所有p清空" id="b2"/>
45. <input type="button" value="删除上海这个li" id="b3"/>
46. </body>
47. </html>

jQuery 的 DOM 操作-上