jQuery基础（二）DOM篇

摘要：将匹配元素集合的父级元素删除，保留自身和兄弟元素，如果存在在原来的位置。方法查找指定元素集合中每一个元素的同辈元素。每次回调函数执行时，会传递当前循环次数作为参数从开始计数。

先介绍下需要用到的浏览器提供的一些原生的方法（这里不处理低版本的IE兼容问题）
创建流程比较简单，大体如下：

创建节点(常见的：元素、属性和文本)

添加节点的一些属性

加入到文档中
流程中涉及的一点方法：

创建元素：document.createElement

设置属性：setAttribute

添加文本：innerHTML

加入文档：appendChild

创建元素节点：可以有几种方式。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")

$("
我是文本节点
") ​ 

append()与appendTo()在结尾处，在开头处DOM内部插入prepend()与prependTo()

动态创建的元素是不够的，它只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。那么问题来了，怎么放到文档上？
这里就涉及到一个位置关系，常见的就是把这个新创建的元素，当作页面某一个元素的子元素放到其内部。针对这样的处理，jQuery就定义2个操作的方法
.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同

$(".content").append("
通过append方法添加的元素
")
$("
通过appendTo方法添加的元素
").appendTo($(".content")) 

在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo

after()与before()，insertAfter()与insertBefore()

外部插入的处理，也就是兄弟之间的关系处理，这里jQuery引入了2个方法，可以用来在匹配I的元素前后插入内容。

before与after都是用来对相对选中元素外部增加相邻的兄弟节点

2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面

2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面
$(".test1").before("before,在匹配元素之前增加", "多参数")

})

$("测试insertBefore方法增加", "多参数").insertBefore($(".test1"))

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。

$("button").on("click", function() {
        //通过empty移除了当前div元素下的所有p元素
        //但是本身id=test的div元素没有被删除
        $("#test").empty()
    })  

remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
remove表达式参数：
remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点

$("button:first").on("click", function() {
        //删除整个 class=test1的div节点
        $(".test1").remove()
    })
    $("button:last").on("click", function() {
        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理
        $("p").remove(":contains("3")")
    }) 

如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理。
detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。

.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。​
clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了

$(".left").append($(".aaron2").clone(true).css("color","blue")) 

.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别
.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用
.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点。分离DOM元素

".right > div:first p:last").replaceWith("replaceWith替换第二段的内容")
$("replaceAll替换第六段的内容").replaceAll(".right > div:last p:last"); 

.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构
.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

$("p").wrap("
")
$("p").wrap(function() {
    return "
";   //与第一种类似，只是写法不一样
})​ 

jQuery提供了一个unwarp()方法 ，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

 $("p").unwrap("
") 

wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法
.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构
.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

.wrapInner( wrappingElement )：给集合中匹配每一个的元素的内部，增加包裹的HTML结构
.wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容

p元素
p元素
$("p").wrapInner("
")

    
p元素

------

    
p元素
 
 

children()方法：快速查找合集里面的第一级子元素
find()方法：快速查找DOM树中的这些元素的后代元素
find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 "*"。
find只在后代中遍历，不包括自己。
选择器 context 是由 .find() 方法实现的；因此，$(".item-ii").find("li") 等价于 $("li", ".item-ii")(找到类名为item-ii的标签下的li标签)。
parent()方法：快速查找合集里面的每一个元素的父元素，因为是父元素，这个方法只会向上查找一级。
parents()方法：查找合集里面的每一个元素的所有祖辈元素。
注意事项：
1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找
2 $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。​
closest()方法：查找当前元素的父辈祖辈元素。
parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了
起始位置不同：.closest开始于当前元素 .parents开始于父元素
遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

next()方法: 查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合。
prev()方法：查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合。
Sibling()方法：查找指定元素集合中每一个元素的同辈元素。
add()方法：用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中。
each()方法：就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数。

$("li").each(function(index,element){
            $(this).css("color","red");
        })