jQuery基础（二）DOM篇

DOM节点的建立

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

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

2. 添加节点的一些属性

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

• 建立元素：document.createElement

• 设置属性：setAttribute

• 添加文本：innerHTML

• 加入文档：appendChild

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

$("<div id='test' class='aaron'>我是文本节点</div>") ​

DOM节点的插入

（一）DOM内部插入

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

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

$(".content").append('<div class="append">经过append方法添加的元素</div>')
$('<div class="appendTo">经过appendTo方法添加的元素</div>').appendTo($(".content"))

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

（二）DOM外部插入

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"))

DOM节点的删除

（一）empty()的基本用法

empty 顾名思义，清空方法，可是与删除又有点不同，由于它只移除了 指定元素中的全部子节点。

$("button").on('click', function() {
        //经过empty移除了当前div元素下的全部p元素
        //可是自己id=test的div元素没有被删除
        $("#test").empty()
    })

（二）remove()的有参用法和无参用法

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方法来处理。
detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。

DOM节点的复制与替换

（一）拷贝clone()

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

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

（二）替换replaceWith()和replaceAll()

.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()方法

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

$('p').wrap('<div></div>')
$('p').wrap(function() {
    return '<div></div>';   //与第一种相似，只是写法不同
})​

（四）包裹unwrap()方法

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

$('p').unwrap('<div></div>')

（五）wrapAll()方法

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

（六）wrapInner()方法

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

<p>p元素</p>
<p>p元素</p>
$('p').wrapInner('<div></div>')
<p>
    <div>p元素</div>
</p>
------
<p>
    <div>p元素</div>
</p>

jQuery遍历

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');
        })