图文讲解jQuery的节点DOM

1,jQuery动态创建节点

  通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程，保留了Html的书写结构，非常简单方便灵活：

  $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

2，DOM内部插入

 

3，DOM外部插入

  

4，DOM删除节点empty()

5,DOM的remove()清空节点

6，DOM的删除之保留数据的删除操作detach()

   

7，DOM的拷贝clone()

但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了.在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色

8,DOM的替换replaceWith()和replaceAll()

• .replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别
• .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序

9，DOM的包裹.wrap()和.unwrap(),.wrapAll(), wrapInner()方法

wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法

10,DOM遍历.children()父子关系，.find()是后代关系（包含父子关系）,.parent()子父关系（返回上一级）

 .parents()上代关系（上代所有）.closest()方法返回的是0个或者一个对象

.children()

  .find()

.parent()

.parents()

.closest()

11，DOM的.next()紧挨着的下一个兄弟关系，.prev()紧接着的上一个兄弟关系,.siblilngs()紧挨着的上下兄弟关系

12，DOM的.add()

.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用

13,DOM的.each()

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数