jQuery学习笔记 — jQuery中的DOM操作

一. DOM操作的分类

一般来说，DOM的操作分为2个方面，即DOM Core(核心)，HTML-DOM和CSS-DOM。

1. DOM Core: JavaScript中的getElementById()，getElementsByTagName()，getAttribute()和setAttribute()等方法，都是DOM Core的组成部分。

2. HTML-DOM: 在使用Javascript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。如documents.forms，element.src

3. CSS-DOM: CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使用网页呈现出各种不同的效果。

二. jQuery中的DOM操作

1. 查找元素节点：使用jQuery选择器可以很方便完成；查找属性节点：利用jQuery选择器查找到需要的元素之后，可以使用 attr() 方法来获取它的各种属性的值。

2. 创建节点：$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。注意：(1) 动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。(2) 当创建单个元素时，要注意闭合标签和使用标准的 XHTML 格式。

3. 插入节点：动态创建HTML元素并没有实际用处，还需要将新创建的元素插入文档中。jQuery提供了几种插入节点的方法：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()

4. 删除节点：jQuery中提供了三种删除节点的方法，即 remove()，detach() 和 empty()。

(1). remove()方法：作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。当某个节点用 remove() 方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此在以后再使用这些元素。另外remove() 方法也可以通过传递参数来选择性删除元素。

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

(3). empty() 方法：严格来讲，empty() 方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。

5. 复制节点：使用clone()方法来进行节点复制，复制节点后，被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能，在clone()方法中传递一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。

6. 替换节点：使用replaceWith() 和 replaceAll()进行替换节点。注意：如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

7. 包裹节点：如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()。还有两个方法，wrapAll() 和 wrapInner()。

8. 属性操作：在jQuery中，用 attr() 方法来获取和设置元素属性，removeAttr() 方法来删除元素属性。注意：在jQuery中的很多方法都是同一个函数实现获取 （getter）和设置（getter）的，如attr()方法，类似的还有html()，text()，height()，width()，val()，css()等方法。

9. 样式操作

(1) 获取样式和设置样式：使用attr方法获取class的属性

(2) 追加样式：jQuery提供了专门的addClass() 方法来追加样式

(3) 移除样式：使用removeClass()方法移除样式

(4) 切换样式：jQuery 提供了一个toggleClass() 方法控制样式上的重复切换如果类名存在则删除它，如果类名不存在则添加它。

(5) 判断是否含有某个样式：hasClass() 可以用来判断元素中是否含有某个class。

10. 设置和获取 HTML、文本和值

(1) html() 方法：读取或设置某个元素中的HTML内容

(2) text()方法：用来读取或设置某个元素中的文本内容

(3) val()方法：用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。

11. 遍历节点

children()方法，next()方法，prev()方法，siblings()方法，closest()方法:取得最近的匹配元素，parent()方法，parents()方法

12. CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性，直接利用css()方法来实现。

使用css()方法需要注意的点：(1)如果值是数字，会被自动转化为像素值 (2) 在 css() 方法中，如果属性带有“-”符号，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法。

除了使用css(“width”)，也可以使用width()或height()方法来获取width或height。两者的区别是，css()方法获取的高度值与样式的设置相关，有可能得到“auto”，也可能得到“10px”之类的字符串；但width()或height()方法获取的高度值，则是元素在页面中的实际高度，与样式的设置无关，并且不带单位。

还有几个与定位相关的方法：

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

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

(3) scrollTop()方法和 scrollLeft()方法：分别是获取元素的滚动条距顶端的距离和距左侧的距离。