jQuery中的DOM操作

jQuery中的DOM操作

DOM分为3个部分，

DOM Core ,HTML-DOM,CSS=DOM

1,查找节点

查找元素节点可以用$选择器，find()和children()方法。

查找属性节点可以用attr()方法,也可以用$的属性过滤选择器 eg:（$(“div[tittle]”)。

2,创建节点

创建元素节点，属性节点，文本节点均可以用  $(“…”) 方法，然后再用append()方法添加到欲添加的父元素节点上。如果添加的节点较多，可以考虑使用html()方法。

3，插入节点

3.1 append() — 在A元素内部的尾部追加B内容 — $(“A”).append(“B”) ;  还可以用于移动元素，移动元素是首先从文档上删除节点，然后将该元素插入到文档中的指定节点；  

3.2 appendTo()  — $(“A”).append(“B”) == $(“B”).appendTo(“A”);

3.3 prepend() — 在A元素内部前置B内容 — $(“A”).prepend(“B”) ;

3.4 prependTo() — 同3.2

3.5 after()— 在A元素之后插入B内容

3.6 insertAfter() — 同3.2

3.7 before() — 在A元素前面插入B内容

3.8 insertBefore() — 同3.2

4，删除节点

remove() —  可以传参数选择性的删除 ,detach(),empty()

5，复制节点

clone() 复制完需绑定到已有的元素上

6，替换节点

replaceWith() — 将A元素替换为B元素 — $(“A”).replaceWith(“B”)

replaceAll() — $(“A”).replaceWith(“B”) == $(“B”).replaceAll(“A”)

注：若在替换元素之前已绑定事件，则替换之后要重新绑定事件。

7，包裹节点

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

wrapAll() — 用一个标签包裹多个选中的标签  

wrapInner() — 顾名思义

8，属性操作

8.1 获取属性和设置属性   attr()   eg:$(“p”).attr( { “title” : ”your title” , “name” : “your name” } )

8.2 删除属性  removeAttr(“ title ”)  删除title属性

9，样式操作

9.1 追加样式  addClass()

9.2 移除样式  removeClass()

9.3 切换样式  toggleClass() 重复切换

9.4 判断是否含有某个样式  hasClass()

10, 设置和获取HTML，文本和值

10.1 读取或设置某个元素的HTML内容  html()

10.2 读取或设置某个元素中的文本内容  text()

10.3 读取或设置元素（包括文本框，下拉列表，单选框）的值，  val()

11, 遍历节点

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

11.2 next()  prev()  

11.3 获取匹配元素前后所有的同辈元素  siblings()

11.4 从元素本身开始，逐级向上级匹配，返回最先匹配的祖先元素  closet()

12, CSS-DOM操作

css(),height(),width(),offset(),position(),scrollTop(),scrollLeft()