时光荏苒

《锋利的jQuery》读书笔记 第三章 jQuery中的DOM操作

1、什么是DOM：

DOM是文档对象模型的缩写。根据W3C DOM规范，DOM是一种和平台、浏览器、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。简单来说，DOM解决了Netscape的JavaScript和Microsoft的JScript之间的冲突，给予了Web设计师和开发者标准的一套方法。让他们能轻松获取和操作网页中的数据、脚本和表层现象。

2、DOM的分类：

1. DOM Core(核心)

   DOM Core不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。JavaScript中的getElementById()、getElementsByTagName()、getAttribute()、setAttribute()等方法，都是DOM Core的组成部分。

2. HTML-DOM

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

3. CSS-DOM
   CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术的只要作用是获取和设置style对象的各种属性。例如：element.style.color="red";

3、attr()方法

    attr()方法来获取它的各种属性的值。

4、创建节点

1. 创建元素。用$(html)的工厂函数。例如：

2. 将这个元素插入到文档中。可以使用append()等的方法。例如：

5、插入节点的方法

• append()  向每个匹配元素内部追加内容   $("ul").append("<li></li>")
  

• appendTo()  将所有匹配的元素追加到指定的元素中。（其实就是颠倒append方法）  $("<li></li>").appendTo("ul")

• prepend()  向给个匹配的元素内部前置内容 。（就是内容放到匹配元素内的前部）

• prependTo()  将所有的匹配元素前置到指定元素中。（其实就是颠倒了prepend()方法）

• after()  在每个匹配的元素之后插入内容。（就是内容放到匹配元素的后面）

• insertAfter()  将所有匹配元素插入到指定元素的后面。（就是颠倒了after()方法）

• before()  在每个匹配的元素之前插入内容。 （就是内容放到匹配元素的前面）

• insertBefore()  将所有匹配元素插入到指定元素的前面。（其实就是颠倒了before()方法）

6、删除节点

1. remove() 

   从DOM中删除所有匹配的元素。当某个节点用remove()方法删除后，改节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个 指向已删除的节点的引用，因此可以在以后再使用这些元素。

2. detach()

   和remove方法一样也是从DOM中删除所有的匹配元素。但是这个方法不会把匹配的元素从jQuery对象中删除，因此可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会被保留下来。

   

3. empty()

   清空节点。

7、clone()函数复制节点。

但是这样的克隆节点后，复制的新节点不会具有任何行为。如果需要新元素也具有复制功能，需要写成加个true。

8、替换节点。

1. replaceWith()方法的作用是将所有的匹配元素都替换成指定的HTML或DOM元素。例如：$("p").replaceWith("<span>bye</span>");

2. replaceAll()方法作用与replaceWith()方法一样，就是颠倒了操作。例如：$("<span>bye</span>").replaceAll("p");
   

     注意：如果在替换之前已经为元素绑定了事件，那么替换后原先绑定的时间将会与被替换的元素一起消失。需要重新绑定事件。

9、包裹节点。

1. warp()方法。将某个节点用其他的标记包裹起来。例如：

2. warpAll()方法。将所有的匹配的元素用一个元素包裹。例如：

   注意：如果被包裹的多个元素之间有其他的元素，其他元素会被放到包裹元素之后。
   

3. wrapInner()

   该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。（其实就是奖匹配元素的内部包裹起来）。例如：

10、属性操作

1. 获取属性和设置属性。

   attr()方法。注意：jQuery方法中的很多方法都是同一个函数实现湖区和设置的，例如attr()、html()、text()、height()、width()、height()、val()和css()。

2. 删除属性。

   removeAttr()方法。

   注意：prop()和removeProp()分别用来获取在匹配元素集中的第一个元素的属性值和为匹配元素删除设置的属性。https://sawthedawn.lofter.com/post/132bed_703613

11、样式操作

1. attr()方法获取样式和操作样式

2. addClass()方法追加样式

3. removeClass()方法移除样式

4. toggleClass()方法切换样式

5. hasClass()方法判断是否含有某个样式。这个方法是为了增加代码可读性而产生的。在jQuery内部其实是调用了is()方法。例如：

12、设置和获取HTML、文本和值

1. html()方法

   类似JavaScript中的innerHTML属性，可以用来读取或设置某个元素中的HTML内容。

   注意：html()方法可以用于XHTML文档，但不能用于XML文档。

2. text()方法

   类似JavaScript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。

   注意：(1)JavaScript中的innerText属性并不能再火狐浏览器下运行，而jQuery的text()方法支持所有浏览器(2)text()方法对所有的HTML文档的和XML文档都有效。

3. val()方法

   类似于JavaScript中的value属性，可以用来设置和获取元素的值。无论元素是文本框还是下来列表，都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。

13、遍历节点

1. children()方法匹配元素的子元素集合。注意：此方法不考虑后代元素。

2. next()方法方法用于取得匹配元素后面紧邻的同辈元素。

3. prev()方法用于取得匹配前面紧邻的同辈元素。

4. siblings()方法取得匹配元素前后所有的同辈的元素。

5. closest() 方法取得最近的匹配元素。例如：

6. parent()、parents()、closest()的区别：

• parent()  获取集合中每个匹配元素的父级元素 从指定类型的直接父节点开始查找。返回一个元素节点。

• parents()  获取集合中每个匹配元素的祖先元素  与parent方法类似，不同是当他找到第一个父节点时并没有停止查找，而是继续查找，最后返回多个父节点。

• closest()  从元素本身开始，逐级向上级匹配元素，并返回最先匹配到的元素。

14、CSS-DOM操作

• 注意：(1)如果值是数字，将会被自动转为像素值。(2)在css()方法中，如果属性中带有”-“符号，如font-size，如果在射中这些属性的值的时候不带引号，那么就要用驼峰形式，例如：如果带上了引号，既可以写成"font-size",也可以写成"fontSize"。建议都加上

• 注意：(1)在Jquery1.2后height()方法可以获得window和document的高度。(2)两者的区别：css()方法获取的高度值与样式的设置有关，可能会得到"auto"，也可能得到"10px"之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，并且不带单位。

• 元素定位

1. offset()方法获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left。它只对可见元素有效。

2. position()方法获取相对于最近的一个positon样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left。

3. scrollTop()方法和scrollLeft()方法

   这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。