jQuery基础之Dom篇总结

dom小知识点很多，总是过段时间又忘了，这次做个总结吧。

文章目录

Dom节点的创建
Dom节点的插入

内部插入
外部插入

Dom节点的删除
Dom节点的复制与替换
遍历

Dom节点的创建

jQuery节点创建常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来。
创建元素节点：

$("<div></div>")

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

创建属性节点：
$("<div id='test' class='aaron'>我是文本节点</div>")

Dom节点的插入

内部插入

.append()前面是被插入的对象，后面是要在对象内插入的元素内容
.appendTo()前面是要插入的元素内容，而后面是被插入的对象
.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素
.prependTo()方法前面是要插入的元素内容，后面是被插入的对象，插到之前。

  例子
    <h2>通过append与appendTo添加元素</h2>
    <button id="btn1">点击通过jQuery的append添加元素</button>
    <button id="btn2">点击通过jQuery的appendTo添加元素</button>
    <div class="content"></div>
<script>
    $("#btn1").on('click',function(){
        $('.content').append($('<div class="append">通过append方法添加的元素</div>'))
        // $('.content').prepend($('<p>prepend方法插入的元素！在前面哦！</p>'))
    })
    $('#btn2').on('click',function(){
        $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($('.content'))
    })
</script>

外部插入

.before():在选中元素后插入参数所指定的内容，作为其兄弟节点
.after():在选中元素前插入参数所指定的内容，作为其兄弟节点

before与after都是用来对相对选中元素外部增加相邻的兄弟节点
2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面
2个方法都支持多个参数传递after(div1,div2,…)

insertAfter()与insertBefore()
insertBefore()和before的效果是一样的，只不过使用方式不一样。
insertBefore():插入的内容在前，括号里是要插入的节点。
不支持多参数！

例子
<h2>通过insertBefore与insertAfter添加元素</h2>
    <button id="bt1">点击通过jQuery的insertBefore添加元素</button>
    <button id="bt2">点击通过jQuery的insertAfter添加元素</button>
    <div class="aaron">
        <p class="test1">测试insertBefore,不支持多参数</p>
    </div>
    <div class="aaron">
        <p class="test2">测试insertAfter,不支持多参数</p>
    </div>
<script>
    $('#bt1').on('click',function(){
        $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"));
    })
</script>

Dom节点的删除

empty():顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了指定元素中的所有子节点。
remove()会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。remove可以传递一个选择器表达式用来过滤匹配元素，可以选择性的删除指定的节点
例如：

$("p").remove(":contains('3')") 移除所有元素中包含3文本的
 此代码也可以写为：
 $("p").filter(":contains('3')").remove()

保留数据的删除操作detach()：
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据。

Dom节点的复制与替换

clone（）：
.clone() 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了。.clone()是浅拷贝。 .clone(true)是深拷贝。复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了。.clone()是浅拷贝。 .clone(true)是深拷贝。
replaceWith(), .replaceAll( target ):
.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
.replaceAll( target ) ：用集合的匹配元素替换每个目标元素
.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别
replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
.replaceWith（）方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用。返回的是Jquery对象引用的是替换前的节点。
wrap()方法:
.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹
.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的HTML 内容或 jQuery 对象。
unwrap()方法:
作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
wrapAll()方法:
wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法
.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构
.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。
.wrapInner( wrappingElement )：
.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构给集合中匹配的元素的内部，增加包裹的HTML结构
将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素。
.wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容
注意：
当通过一个选择器字符串传递给.wrapInner() 函数，其参数应该是格式正确的 HTML，并且 HTML 标签应该是被正确关闭的。

遍历

后代：
children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对DOM 树进行遍历。
.children()方法选择性地接受同一类型选择器表达式
例如：$(“div”).children(".selected")
因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 ‘*’。
选择器 context 是由 .find() 方法实现的；因此，$(’.item-ii’).find(‘li’) 等价于 $(‘li’, ‘.item-ii’)(找到类名为item-ii的标签下的li标签)。
例子：

    var $spans = $('span');
    $("p").find($spans).css('color', 'red');

祖先：
parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。可以使用可选参数来过滤对祖先元素的搜索。

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

closest()：从元素本身开始，在DOM树上逐级向上级元素匹配，并返回最先匹配的祖先元素树上逐级向上级元素匹配，并返回最先匹配的祖先元素。
$(“div”).closet("li’) 在div元素中往上查找所有的li元素

.parents()和.closest()的区别：
1.起始位置不同：.closest开始于当前元素 .parents开始于父元素
2.遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
3.结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

同胞：
next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。选择性地接受同一类型选择器表达式
prev() 查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合.选择性地接受同一类型选择器表达式
nextAll() 返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
siblings() 方法返回被选元素的所有同胞元素。选择性地接受同一类型选择器表达式

add():将元素添加到匹配的元素集合中，.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。

each()：
    $("li").each(function(index, element) {
         index 索引 0,1
         element是对应的li节点 li,li
         this 指向的是li
    })

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

    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
<script>
    $('p').each(function(index,ele){
        $(this).css('color','red');
    });
    $('p').each(function(index,ele){
        if(index %2){
            $(this).css('color','blue');
        };
    });
</script>