jQuery DOM节点

1、DOM节点的创建

（1）DOM节点的创建

创建元素：document.createElement

设置属性：setAttribute

添加文本：innerHTML

加入文档：appendChild

（2）jQuery节点的创建与属性的处理

创建元素节点 $("<div></div>")

创建文本节点 $("<div>我是文本节点</div>")

创建属性节点 $("<div id="" class="">我是属性节点</div>")

2、DOM节点的插入

（1）DOM内部插入append()与appendTo() （从下面插入）

.append(content)：向每个匹配的元素内部追加内容 （对象在前，内容在后）

.appendTo(content)：把所有匹配的元素追加到另一个指定的元素集合中去 （内容在前，对象在后）

（append()前面是被插入的对象，后面是要在对象内插入的元素内容； appendTo()前面是要插入的元素内容，而后面是被插入的对象）

（2）DOM外部插入after()与before()

.after(content)：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点 （向元素后边添加HTML代码）

.before(content)：据参数设定，在匹配元素的前面插入内容 （向元素前边添加HTML代码）

（3）DOM内部插入prepend()与prependTo() （从上面插入）

.prepend()向每个匹配的元素内部前置内容 （对象在前，内容在后）

.prependTo()把所有匹配的元素前置到另一个指定的元素集合中 （内容在前，对象在后）

（4）DOM外部插入insertAfter()与insertBefore() （两个都是内容在前，对象在后）

insertBefore：在目标元素前面插入集合中每个匹配的元素

insertAfter：在目标元素后面插入集合中每个匹配的元素

3、DOM节点的删除

（1）.empty()：清空指定元素中的所有后代节点，不能删除自己本身的这个节点

（2）.remove()：a、该节点与该节点所包含的所有后代节点将同时被删除

b、 提供传递一个筛选的表达式，用来过滤将被移除的匹配元素集合，删除指定合集中的元素

（3）detach()：从当前页面中移除该元素，与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。当你append之后，又重新回到了文档流中。就又显示出来了。

4、DOM节点的复制与替换

（1）拷贝

.clone()：只克隆了结构，事件丢失

.clone(true)：结构、事件与数据都克隆

（2）替换

replaceWith()：传入一个新的内容B（HTML字符串，DOM元素，或jQuery对象）用来替换选中的节点A

replaceAll()：用集合的匹配元素替换每个目标元素

（3）包裹

.wrap()：在集合中匹配的每个元素周围包裹一个HTML结构（即给选中元素增加一个包裹的父元素）

.unwrap()：删除选中元素的父元素

.wrapAll()：wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，wrapAll()

.wrapInner()：给集合中匹配的元素的内部，增加包裹的HTML结构

5、jQuery遍历

（1）.children()方法：查找合集里面的第一级子元素（只能是儿子辈）

（2）.find()：查找范围包括子节点的所有后代节点 (儿子辈、孙子辈都可以)

（3）.parent()：查找合集里面的每一个元素的父元素

（4）.parents()：查找合集里面的每一个元素的所有祖辈元素

（5）.closest()：从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

（6）.next()：配合集中每一个元素的下一个兄弟元素

（7）.prev()：匹配合集中每一个元素的上一个兄弟元素

（8）.siblings()：匹配合集中每一个元素的同辈元素

（9）.add()：往合集中添加一个新的元素

（10）.each()：each是一个for循环的包装迭代器，通过回调的方式处理，并且会有2个固定的实参，索引与元素，each回调方法中的this指向当前迭代的dom元素