Jquery基础之---DOM篇

一、DOM创建节点及节点属性（JavaScript原生方式）
（1）创建节点(常见的：元素、属性和文本)
           创建元素：document.createElement
           添加文本：innerHTML
（2）添加节点的一些属性
          设置属性：setAttribute
（3）加入到文档中
          加入文档：appendChild
二、jQuery节点创建与属性的处理
（1）创建元素节点：$("<div></div>")
（2）创建稳本节点：$("<div>我是文本节点</div>")
（3）创建属性节点：$("<div id='test' class='aaron'>我是文本节点</div>")
三、DOM内部插入append()与appendTo()
（1）append()前面是被插入的对象，后面是要在对象内插入的元素内容
（2）appendTo()前面是要插入的元素内容，而后面是被插入的对象
四、DOM外部插入after()与before()
外部插入的处理，也就是兄弟之间的关系处理。
（1）before与after都是用来对相对选中元素外部增加相邻的兄弟节点；
（2）2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面；
（3）2个方法都支持多个参数传递after(div1,div2,....) 
五、DOM内部插入prepend()与prependTo()
（1）append()向每个匹配的元素内部追加内容；
（2）prepend()向每个匹配的元素内部前置内容；
（3）appendTo()把所有匹配的元素追加到另一个指定元素的集合中；
（4）prependTo()把所有匹配的元素前置到另一个指定的元素集合中。
六、DOM外部插入insertAfter()与insertBefore()
（1）insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；；
（2）insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；
七、DOM节点删除之empty()的基本用法
如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中
                //通过empty处理
                $('.hello').empty()
                //结果：<p>慕课网</p>被移除
                <div class="hello"></div>
八、DOM节点删除之remove()的有参用法和无参用法
（1）remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
           //通过remove处理
         $('.hello').remove()
        //结果：<div class="hello"><p>慕课网</p></div> 全部被移除
       //节点不存在了,同时事件也会被销毁
（2）remove表达式参数：
remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点
       $("p").filter(":contains('3')").remove()
八、DOM节点删除之保留数据的删除操作detach()
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。
九、DOM拷贝clone()
（1）.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
    例如：
          HTML部分
          <div></div>

        JavaScript部分
       $("div").on('click', function() {//执行操作})

       //clone处理一
      $("div").clone()   //只克隆了结构，事件丢失

       //clone处理二
      $("div").clone(true) //结构、事件与数据都克隆
十、DOM替换replaceWith()和replaceAll()
一段HTML代码：
            <div>
               <p>第一段</p>
                <p>第二段</p>
               <p>第三段</p>
        </div>
替换第二段的节点与内容：
        $("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')
       $('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')
十一、DOM包裹wrap()方法
如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个wrap方法。
          <p>p元素</p>
给p元素增加一个div包裹：
        $('p').wrap('<div></div>')
最后的结构，p元素增加了一个父div的结构：
                      <div>
                               <p>p元素</p>
                     </div>
十二、jQuery遍历之find()方法
jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）
十三、jQuery遍历之closest()方法
closest()方法接受一个匹配元素的选择器字符串，从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。
（1）起始位置不同：.closest开始于当前元素 .parents开始于父元素；
（2）遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合；
（3）结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象；
十四、jQuery遍历之each()
（1）.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数
        ①each是一个for循环的包装迭代器
        ②each通过回调的方式处理，并且会有2个固定的实参，索引与元素
       ③each回调方法中的this指向当前迭代的dom元素。