jQuery中的DOM操作详细总结

1.DOM操作的分类

DOM Core（核心）：任何一种支持DOM的程序设计语言都能使用它。getELementById等方法是组成部分

HTML-DOM：获取某些对象、属性可以使用这个。也能用DOM Core实现，就是这个简短。document.forms;element.src

CSS-DOM：是针对CSS的操作。

2.jQuery中的DOM操作

2.1查找节点

$("ul li:eq(1)");  利用选择来查找

$("p").attr("title");    查找属性节点

2.2创建节点

利用$()创建

2.3插入节点

想达到的效果，A的内部添加B……

A.append(B)            B.appendTo(A)

B.prepend（A）     A.prepend（B）

想要达到的效果，A的后边添加B……A B

A.after(B)                 B.insertAfter(A)

B.before(A)             A.insertBefore(B)

作用不仅有插入到文档中，也能对原有的DOM元素进行移动

2.4删除节点

remove()   后代节点一起删除

detach()  不会把绑定的事件、附加的数据删掉，之后还可以用

empty()   清空元素中的所有后代节点，元素里的。

2.5复制节点

clone()    复制后的新元素不具有任何行为

clone(true)    复制元素的同时，复制元素中绑定的事件；该元素副本也具有复制功能

2.6替换节点

replaceWith()     将所有匹配的元素都替换成指定的HTML或者DOM元素

replaceAll()     与replaceWith()功能一样，只是颠倒了操作

2.7包裹节点

$("strong").wrap（"<b></b>"） 用b标签把strong元素包裹起来

wrapAll()          将所有匹配的元素用一个元素包裹起来……全包裹

wrapInner（）      将每一个匹配的元素的子内容用其他结构化的标记包裹起来

2.8属性操作

获取：.attr()

设置：.attr("title":"123","name":"test")

删除：.removeAttr()

2.9样式操作

获取：.attr("class")

设置：arrt("class","high")    前边有样式的话，会用high覆盖，没有则添加

追加样式:.addClass()    不覆盖，会添加

移除样式：.removeClass("high another")

切换样式：.toggle()                .toggleClass()样式上的重复切换

判断是否含有某个样式：  hasClass()    有返回true。没有返回false

CSS的两条规定：

1.如果给一个元素添加了多个class值，那么久相当于合并了他们的样式

2.如果有不同的class设定了同一样式属性，则后者覆盖前者

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

获取html：.html()

设置html：html（“<strong>你选择的水果是？</strong>”）

获得文本：.text()

设置文本：.text("你喜欢的水果？")

获取值：val（）  文本框、下拉列表和单选框都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值得数组。

2.11遍历节点

children()     获取匹配元素的子元素的集合

next（）   获取匹配元素后面紧邻的同辈元素

prev（）   获取匹配元素前面紧邻的同辈元素

siblings（）获取匹配元素的前后所有的同辈元素

closest（）  从本身开始查找，获取最近的匹配的元素（一个元素）

parent（）获取集合中每个匹配元素的父级元素（一个元素）

parents（）获取集合中每个匹配元素的祖先元素（多个元素）

2.12CSS-DOM操作

CSS-DOM技术就是读取和设置style对象的各种属性。

css()  获取元素的样式属性

offset()      获取元素在当前视窗的相对偏移

position()        获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移

scollTop()        获取元素的滚动条距顶端的距离

scollLeft()        获取元素的滚动条距左侧的距离

hight（）和.css("height")都能获得元素的高度，他们的区别是：

css（）方法获取的高度值与样式的设置有关，可能会得到auto；height（）方法得到的高度值则是元素在页面中的实际高度，与样式设置无关，并且不带单位