锋利的jQuery--第三章 jQuery中的DOM操作【读书笔记】-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

#锋利的jQuery
##jQuery中的DOM操作
DOM是Document Object Model的缩写，意思是文档对象模型。根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中的所以标准组件。
###3.1 DOM操作的分类
DOM操作可以分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。
####1. DOM Core
DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它，它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言写出来的文档，例如XML。
JavaScript中的getElementByI的()、getElementsByTagName()、getAttribute()等方法都是DOM Core的组成部分。
例如：
* 使用DOM Core来获取表单对象的方法：
 document.getElementsByTagName("form");

* 使用DOM Core来获取某元素的src属性的方法：
 element.getAttribute("src");

####2. HTML DOM
在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。HTML-DOM的出现甚至比DOM Core还要早，它提供了一些更简明的记号来描述各种HTML元素的属性。
例如：
* 使用HTML-DOM来获取表单对象的方法：
 document.forms//HTML-DOM提供了一个forms对象
* 使用HTML-DOM来获取某元素的src属性的方法：
 element.src;
可以发现获取某些对象、属性既可以用DOM Core来实现也可以使用HTML-DOM实现，。相比较而言HTML-DOM的代码通常比较简短，不过它只能用来处理Web文档。

####3. CSS_DOM
CSS-DOM是针对CSS的操作。
例如：设置某元素style对象字体颜色的方法：
 element.style.color="red";

###3.2 jQuery中的DOM操作

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <title>dom</title>
 </head>
 <body>
 你最喜欢的水果是？
 <ul>
 <li title="苹果">苹果</title>
 <li title="橘子">橘子</title>
 <li title="菠萝">菠萝</title>
 </ul>
 </html>

####3.2.1 查找节点
* 1. 查找元素节点
 var $li = $("ul li:eq(1)");
 var li_txt = $li.text();
 alert(li_txt);
* 2. 查找属性节点
利用jQuery选择器查找到元素后，就可以使用attr()方法获取它的各种属性的值。

 var $para = $("p");
 var p_txt = $para.attr("title");
 alert(p_txt);

###3.2.2 创建节点
* 1. 创建元素节点
（1）创建两个<li>新元素。
（2）将这两个新元素插入文档中。
$(html) 方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
 var $li_1 = $("<li></li>");
 var $li_2 = $("<li></li>");
 $("ul").append($li_1);
 $("ul").append($li_2);//可以采取链式写法：$("ul").append($li_1).append($li_2);

* 2. 创建文本节点
 var $li_1 = $("<li>香蕉</li>");//创建一个<li>元素，包括元素节点和文本节点“香蕉”
 var $li_2 = $("<li>雪梨</li>");
 $("ul").append($li_1);
 $("ul").append($li_2);

* 3. 创建属性节点
 var $li_1 = $("<li title='香蕉'>香蕉</li>"); //title='香蕉'就是创建的属性节点
 var $li_2 = $("<li title='雪梨'>雪梨</li>");
 $("ul").append($li_1);
 $("ul").append($li_2);

* 3.2.3 插入节点
表3-1 插入节点的方法
方法 描述
append() 向每个匹配的元素内容追加内容。
appendTo() 将所以匹配的元素追加到指定的元素中。
prepend() 向每个匹配的元素内容内部前置内容。
prependTo() 将所有匹配的元素前置到指定的元素中。
after() 在每个匹配的元素之后插入内容
insertAfter() 将所有匹配的元素插入到指定元素后面。
before() 在每个匹配的元素之前插入内容
insertBefore() 将所有匹配的元素插入到指定的元素前面

 var $li_1 = $("<li title='香蕉'>香蕉</li>");
 var $li_2 = $("<li title='雪梨'>雪梨</li>");
 var $li_3 = $("<li title='其它'>其它</li>");
 var $parent = $("ul");
 var $two_li = $("ul li:eq(1)");
 $parent.append($li_1);
 $parent.prepend($li_2);
 $li_3.insertAfter($two_li);

 var $one_li = $("ul li:eq(1)");
 var $two_li = $("ul li:eq(2)");
 $two_li.insertBefore($one_li);

###3.2.4 删除节点
jQuery提供了两种删除节点的方法，即remove()和empty()。
* 1. remove()方法
作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。
 $("ul li:eq(1)").remove();

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
 var $li = $("ul li:eq(1)").remove();
 $li.appendTo("ul");//把刚才删除的节点又重新添加到<ul>元素里

remove()方法也可以通过传递参数来选择性地删除元素，jQuery代码如下：
 $("ul li").remove("li[title!=菠萝]");

* 2. empty()方法
empty方法并不是删除节点而是清空节点，它能清空元素中的所有后代节点。

###3.2.5 复制节点
 $("ul li").click(function(){
 $(this).clone.appendTo("ul");//复制当前单击的节点并将其追加到<ul>元素中
 })
复制节点后，被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能（本例是单击事件），可以：
 $(this).clone(true).appendTo("body");//注意参数true
在clone()方法中传递了一个参数true，它的含义是复制元素的同时复制元素所绑定的事件。因此钙元素的副本也同样具有复制功能。

###3.2.6 替换节点
要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll().
 $("p").replaceWith("你最不喜欢的水果是?");
replaceAll()方法与replaceWith()相同，只是颠倒了replaceWith()操作。如：
 $("你最不喜欢的水果是?").replaceAll("p");

如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

###3.2.7 包裹节点