jQuery系列第七章 jQuery框架DOM操做

时间 2019-11-05

标签 jquery 系列第七框架 dom 栏目 JQuery 繁體版

原文原文链接

第七章 jQuery框架的选择器

jQuery框架继承和优化了JavaScript访问DOM对象的特性，咱们使用jQuery框架提供的api能够更加方便的操做DOM对象。
html

7.1 建立DOM节点

使用JavaScript原生方式建立DOM节点并添加到页面中的代码示例：node

1 //01 建立DOM节点
2  var oDiv = document.createElement("div");
3  //02 设置DOM节点的内容
4  oDiv.innerText = "测试的DIV标签";
5  //03 把节点添加到页面中
6  document.body.appendChild(oDiv);

使用jQuery框架建立DOM节点并添加的代码示例：jquery

1 //01 建立DOM节点
2  var oDom = $("<div></div>");
3  //02 设置DOM节点的内容
4  oDom.text("测试的div标签");
5  //02 把DOM节点添加到页面中
6  $("body").append(oDom);

更简单的建立及添加方式：
$("body").append($("<div>我是测试的div标签</div>"));api

说明app

【1】jQuery框架简化了DOM操做，直接使用jQuery构造函数$()来建立标签，在建立标签的时候只须要把HTML字符串传递给函数，jQuery框架会根据参数的内容来建立标签并包装成一个jQ实例对象返回。框架

【2】要明白jQuery框架的DOM操做自己是对JavaScript原生方式进行的封装，因此相对原生的DOM操做而言效率更低。函数

7.2 插入DOM节点

jQuery框架中提供了多个插入DOM节点的方法，咱们能够经过调用这些方法方便的实现节点的插入操做。测试

在JavaScript原生的DOM操做中，咱们一般使用appendChild和insertBefore方法来实现插入操做，下面的具体的代码示例。优化

 1 <body>
 2 <div>我是div标签1</div>
 3 <div>我是div标签2</div>
 4 <script>
 5     //appendChild方法使用
 6     //01 建立p标签
 7     var oP = document.createElement("p");
 8     oP.innerHTML = "我是p标签";
 9     //02 获取页面中第一个div标签
10     var oDiv1 = document.getElementsByTagName("div")[0];
11     //03 使用appendChild方法添加
12     //把p标签插入到oDiv1标签内容的后面
13     oDiv1.appendChild(oP);
14     //insertBefore方法使用
15     var oDiv2 = document.getElementsByTagName("div")[1];
16     //把p标签插入到oDiv2标签内容的前面
17     oDiv2.insertBefore(oP,oDiv2.firstChild);
18 </script>
19 </body>

jQuery框架中为咱们提供了四个方法来提供对应的功能，它们分别是：
[1]append方法:向每一个匹配的元素内部追加内容。
[2]appendTo方法：把全部匹配的元素追加到另外一个指定的元素集合中，和append方法相反。
[3]prepend方法:向每一个匹配的元素内部前置内容。
[4]prependTo方法：把全部匹配的元素前置到另外一个指定的元素集合中，和append方法相反。spa

插入方法的代码示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jQuery框架/jquery-2.0.0.js"></script>
 7 </head>
 8 <body>
 9 <div class="cur">我是div1</div>
10 <div>我是div2</div>
11 <div>我是div3</div>
12 <ul>
13     <li>我是第1个li</li>
14     <li>我是第2个li</li>
15     <li>我是第3个li</li>
16     <li>我是第4个li</li>
17     <li>我是第5个li</li>
18 </ul>
19 <button>按钮</button>
20 <script>
21     $(function () {
22         $("button").click(function () {
23             //appendTo:把页面中全部的li标签都插入到全部的div标签内容的后面
24             //$("li").appendTo($("div"));
25             //append:把页面中全部的div标签都插入到全部的li标签内容的后面
26             //$("li").append($("div"));
27             //prependTo:把页面中全部的li标签都插入到全部的div标签内容的前面
28             //$("li").prependTo($("div"));
29             //prepend:把页面中全部的div标签都插入到全部的li标签内容的前面
30             //$("li").prepend($("div"));
31         })
32     })
33 </script>
34 </body>
35 </html>

jQuery框架中还提供了多个外部插入内容的方法，它们分别是：
[1]after方法：在每一个匹配的元素以后插入内容。
[2]before方法：在每一个匹配的元素以前插入内容。
[3]insertAfter方法：把全部匹配的元素插入到另外一个指定的元素集合的后面。
[4]insertBefore方法：把全部匹配的元素插入到另外一个指定的元素集合的前面。

7.3 删除DOM节点

JavaScript原生的DOM操做中可使用removeChild方法来删除指定的节点以及其包含的全部子节点，并返回这些删除的内容。

jQuery框架中定义了3个删除内容的方法：它们分别是remove（）、empty（）和detach（）。

remove方法可以将匹配的元素从DOM中删除。
empty方法用来清空元素包含的内容，该方法没有参数。
detach方法可以将匹配的元素从DOM中分离出来。

注意

[1] 删除和清空是两个概念，清空操做执行后该标签还存在。

[2] detach方法和remove方法差很少，但detach方法可以保存全部jQuery数据与被移走的元素相关联，全部绑定在元素上的事件、附加的数据等都会保存下来。若是您在移走一个元素不久后，又须要将该元素从新插入DOM，那么推荐使用detach方法。

7.4 复制和替换DOM节点

① 节点的复制

在JavaScript原生方式操做DOM节点时，可使用cloneNode方法来复制节点，具体的语法以下：

语法：nodeObject.cloneNode(include_all)
参数：

include_all参数自己为布尔类型的值。

若是为true，那么将会复制原有的节点以及全部的子节点。
若是为false，那么牢牢复制节点自己。

jQuery框架中，使用clones方法来复制节点，具体的语法以下：

语法：jQ.clone（[widthDataAndEvents]，[deepWithDataAndEvents]）
参数：
clone方法的两个参数都是可选的布尔值，若是不传递则默认所有为false。

widthDataAndEvents参数表示是否复制该节点的事件处理数据。
deepWithDataAndEvents参数表示是否复制子元素的事件处理数据。

② 节点的替换

在原生的DOM操做中，可使用replaceChild方法来替换节点。
语法：nodeObject.replaceChild(new_node,old_node)
参数说明：new_node为指定的新节点，old_node为被替换的节点。若是替换成功，那么会返回被替换的节点，若是替换失败，那么会返回null。

jQuery框架中定义了replaceWith和replaceAll方法来替换节点。

[1] replaceWith方法

语法：jQ.replaceWith（newContent）
说明：replaceWith方法可以将全部匹配的元素都替换成指定的HTML或者是DOM元素。
示例：$("p").replaceWith("<div>我是DIV标签<div>")

[2] replaceAll方法

语法：jQ.replaceAll(selector)
说明：replaceAll方法和replaceWith是一对相反的操做。