jQuery的DOM操作

基本操作：增删改查。
前端开发中，基本就是对DOM进行操作，简略分成设计、逻辑、DOM操作方法三大块。其中DOM操作方法必须了解增删改查。
在jQuery出现前的时代，仅仅使用javaScript来操作DOM是一种非常辛苦的事情，而jQuery很好的封装了js的方法，使得操作DOM变得简便起来，因此在当时具有跨时代的意义。
（当然，Angular出来后，js向大型应用开发进军，也是一个跨时代的意义）

以下是整理的一些jQuery的DOM操作方法

---

查（选择）

1、jQuery选择器：$(‘#text’)

最基本的选择器，简化了js的getElementById\byClassNames，querySelectorAll()等方法。允许使用css选择器来对DOM元素进行选择。

###遍历

2、子元素

$(“.parent”).children();//所有子元素的集合

#####3、next()、prev()、first()、last()方法 常用的方法，比起js（特别是IE，还需要留意text节点）更加简便 #####4、siblings()方法，获得相邻的所有元素集合

5、parent()、parents()、closest()

parent()用于查找一级父元素，parents()查找所有父元素的集合，closest()查找最近的父元素
例如：

<div>
    <ul>
        <li id=“a”></li>
    </ul>
</div>
var test = $(“#a”);

test.parent();//ul
test.parents();//ul,div..一直到html
test.closest(“div”)//div

6、find()

同js的[某元素].getElementById()，在某元素里面找元素

7、nextAll()、prevAll()

Ps:javaScript的对应方法
firstChild(),lastChild,parent()….

---

增（增加、插入节点）

1、jQuery选择器：$(“

”)（支持直接写入表达式）

复制

2、克隆

$(“.origin”).clone();//原来的不会消失

插入

3、append()、prepend()//向某元素的最前或者最后插入元素

4、appendTo()、prependTo()//颠倒使用

5、after()、before()//对匹配的元素的前或后都插入

---

改（修改节点）

1、替换节点replaceWith()(前换成后)和replaceAll()

2、包裹节点wrap()如：$(“strong”).wrap(“”);//用标签把strong包裹起来

获取文本和值

3、html()、text()（同innerHTML和innerText)

4、val()（获取input控件的value）

---

删（删除节点）

1、remove()

2、empty()

3、detach()方法//使用后，可以重新追加元素，原来的事件仍然存在。类似于clone后再append

---

参考资料：

1、http://www.45it.com/javascript/201003/23730.htm
2、《锋利的jQuery》