锋利的 jQuery (第二版) jQuery 中的 DOM 操作

DOM 是一种与浏览器、平台、语言无关的接口，使用该接口可以访问到网页容器中的标准组件。
解决 Netspace 的 JavaScript 和 Miscrosoft 的 JScript

3.1 DOM 操作的分类

DOM 操作分为 DOM Core(核心)、HTML-DOM 和 CSS-DOM
1. DOM Core
任一支持 DOM 的程序设计语言都可以使用 DOM Core。
2. HTML-DOM
3. CSS-DOM

3.2 jQuery 中的 DOM 操作

3.2.1 查找节点

1. 查找元素节点
2. 查找属性节点
attr(param1 [, param2]): 只有一个参数时获得对应属性值，有两个参数时为设置对应属性值。

3.2.2 创建节点

1. 创建元素节点

$(html)

2. 创建文本节点
3. 创建属性节点

3.2.3 插入节点

方法	简述	实例
append()	s	s
appendTo()	追加到指定元素中
prepend()	s
prependTo()	s
after()	s
insertAfter()	s
before()	s
insertBefore()	s

3.2.4 删除节点

1. remove()方法
作用：从 DOM 删除是所有匹配的元素，传入的参数用于根据 jQuery 表达式来筛选元素。
返回：指向删除节点的引用。
2. detach()方法
作用：不会将匹配的元素从 jQuery 对象删除。 所有绑定的事件、附加的数据等都会保存下来。
3. empty()方法
作用：清空元素中的所有后代节点。

3.2.5 复制节点

clone()方法
clone(true) : 复制元素的同时复制元素绑定的事件。
商品拖动功能（将商品加入购物车）用的就是复制节点。

3.2.6 替换节点

1. replaceWith()
2. replaceAll()
替换后需要重新绑定事件

3.2.7 包裹节点

1. wrap()方法
作用：将所有元素进行单独的包裹。
2. wrapAll()方法
作用：将所有匹配的元素用一个元素来包裹。
3. wrapInner()方法
将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。

3.2.8 属性操作

1. 获取属性与设置属性
attr(param) : 获取属性值
arrr(param1, param2): 设置单个属性
attr(jsonData):设置多个属性
2. 删除属性
removeAttr(param)

3.2.9 样式操作

1. 获取样式与设置样式
attr("class"):获取样式
attr("class", param):设置样式, 替换之前的样式
2. 追加样式
addClass(param)
3. 移除样式
removeClass(param)
4. 切换样式
toggleClass(param): 若类名存在则删除它， 不存在则添加它。
附加：toggle(function1, function2): 元素原来显示的，则隐藏他；隐藏的则显示它。
5. 判断是否含有某个样式
hasClass(param) 等价于 is()方法

$("p"),hasClass("my") 等价于 $("p").is(".my")

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

1. html()
2. text()
JavaScript的 innerText 不能在 Firefox 中运行。
3. val()

3.2.11 遍历节点

1. childdren()
作用：取得匹配元素的子元素集合。
2. next()
作用：取得匹配元素后面紧邻的同辈元素。
3. prev()
作用：取得匹配元素前面紧邻的同辈元素。
4. siblings()
作用：取得匹配元素前后所有的同辈元素。
5. closest(param)
作用：取得最近的匹配元素。
6. parent() 和 parents()的区别
parent() : 返回父级元素。
parents() : 返回祖先元素。

3.2.12 CSS-DOM 操作

css(param) : 获取对应属性值。
css(param1, param2) : 设置单个属性。
css(jsonData) : 设置多个属性。若设置属性的值时不带引号，则需要采用驼峰式写法。如

$("p").css({fontSize : "20px", backgroundColor : "#fff"});

css()获取的高度值与样式的设置有关， 而 height()获取的高度值是样式在页面的实际高度， 与样式设置无关， 并且不带单位。
1. offset()
作用：获取元素在当前视窗的相对偏移， 返回对象包括两个属性 top 和 left， 它只对可见元素有效。
2. position()
作用：获取元素相对于最近的一个 position 样式属性设置为 relative 或 absolute 的祖父节点的相对位移， 返回对象包括两个属性 top 和 left。
3. scrollTop()方法和scrollLeft()方法
作用：获取元素的滚动条距顶端的距离和距左侧的距离。
附加：这两个方法可以指定一个参数， 控制元素的滚动条滚动到指定的位置。