jQuery学习——DOM篇_varrightdiv=jquery(-CSDN博客

本文链接：https://blog.csdn.net/anfangw/article/details/53486074

jQueryDOM篇——节点操作

插入节点、查找节点、删除节点、包裹节点、替换节点、复制节点

javascript方法创建节点

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left,.right {width: 300px;height: 120px;}
        .left div,.right div {width: 100px;height: 90px;padding: 
                            5px;margin: 5px;
                            float: left;border: 1px solid #ccc;}
        .left div {background: #bbffaa;}
        .right div {background: yellow;}
    </style>
</head>
<body>
    <h2>动态创建元素节点</h2>
    <div class="left">
        <div class="aaron">点击body区域会动态创建元素节点</div>
    </div>
    <script type="text/javascript">
        var body = document.querySelector('body');     
        document.addEventListener('click',function(){
    //创建2个div元素
        var rightdiv = document.createElement('div')
        var rightaaron = document.createElement("div");

        //给2个div设置不同的属性
        rightdiv.setAttribute('class', 'right')
        rightaaron.className = 'aaron'
        rightaaron.innerHTML = "动态创建DIV元素节点";

        //2个div合并成包含关系
        rightdiv.appendChild(rightaaron)

        //绘制到页面body
        body.appendChild(rightdiv)
        },false)
    </script>
</body>
</html>

jQuery方法创建节点

<script type="text/javascript">
    var $body = $('body');
    $body.on('click', function() {
        //通过jQuery生成div元素节点
        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
        $body.append(div)
    })

</script>

jQuery插入append()与appendTo()

    append()前面是被插入的对象，后面是要在对象内插入的元素内容
    appendTo()前面是要插入的元素内容，而后面是被插入的对象

<!--都将插入到目标容器的末尾-->
<script type="text/javascript">
    $("#bt1").on('click', function() {
        //.append(), 选择表达式在函数的前面，
        //参数是将要插入的内容。
        $(".content").append('<div class="append">通过append方法添加的元素</div>')
    })
</script>

<script type="text/javascript">
    $("#bt2").on('click', function() {
        //.appendTo()刚好相反，内容在方法前面，
        //无论是一个选择器表达式 或创建作为标记上的标记
        $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
    })
</script>

外部插入after()与before()

<body>
    <button id="bt1">点击通过jQuery的before添加元素</button>
    <button id="bt2">点击通过jQuery的after添加元素</button>
    <div class="aaron">
        <p class="test1">测试before</p>
    </div>
    <div class="aaron">
        <p class="test2">测试after</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在匹配test1元素集合中的每个元素前面插入p元素
        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在匹配test1元素集合中的每个元素后面插入p元素
        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')

    })
    </script>

内部插入prepend()与prependTo()

<script type="text/javascript">
    $("#bt1").on('click', function() {
        //找到class="aaron1"的div节点
        //然后通过prepend在内部的首位置添加一个新的p节点
        $('.aaron1')
            .prepend('<p>prepend增加的p元素</p>')
    })
</script>
<script type="text/javascript">
    $("#bt2").on('click', function() {
        //找到class="aaron2"的div节点
        //然后通过prependTo内部的首位置添加一个新的p节点
        $('<p>prependTo增加的p元素</p>')
            .prependTo($('.aaron2'))
    })
</script>
<!--append()向每个匹配的元素内部追加内容
    prepend()向每个匹配的元素内部前置内容
    appendTo()把所有匹配的元素追加到另一个指定元素的集合中
    prependTo()把所有匹配的元素前置到另一个指定的元素集合中-->

外部插入insertAfter()与insertBefore()

<script type="text/javascript">
    $("#bt1").on('click', function() {
        //在test1元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
    })
</script>
<script type="text/javascript">
    $("#bt2").on('click', function() {
        //在test2元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
    })
</script>
<!--.before()和.insertBefore()实现同样的功能。区别是语法——内容和目标的位置。 
        before()选择表达式在函数前面，内容作为参数，
        而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面
        .after()和.insertAfter() 实现同样的功能。（插入）内容和目标的位置。 
        对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面-->

节点的删除

empty()的基本用法

<!--移除了 指定元素中的所有子节点-->
<script type="text/javascript">
    $("button").on('click', function() 
    {
    //通过empty移除了当前div元素下的所有p元素,但是本身id=test的div元素没有被删除
        $("#test").empty()
    })
</script>

remove()的基本用法

<!--remove移除元素自身，同时移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。-->
<!--remove好的地方:可以传递一个选择器表达式过滤将被移除的匹配元素集合，选择性删除指定节点-->
<script type="text/javascript">
    $("button:first").on('click', function() 
    {
    //删除整个 class=test1的div节点
        $(".test1").remove()
    })
    $("button:last").on('click', function() 
    {
    //找到所有p元素中，包含了3的元素,这个也是一个过滤器的处理
        $("p").remove(":contains('3')")
    })
</script>

empty和remove的区别

empty方法

严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
empty不能删除自己本身这个节点

remove方法

该节点与该节点所包含的所有后代节点将同时被删除
提供传递一个筛选的表达式，删除指定合集中的元素

保留数据的删除操作detach()

<script type="text/javascript">
    $('p').click(function(e) 
    {
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() 
    {
        if (!($("p").length)) return; //去重
    //通过detach方法删除元素,只是页面不可见，但是这个节点还是保存在内存中,数据与事件都不会丢失
        p = $("p").detach()
    });
    $("#bt2").click(function() 
    {
    //把p元素在添加到页面中,事件还是存在
        $("body").append(p);
    });
</script>

detach()和remove()区别

remove：移除节点

无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据
有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据
detach：移除节点

移除的处理与remove一致

与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
例如：$(“p”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

clone()

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

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

替换replaceWith()和replaceAll()

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
.replaceAll( target ) ：用集合的匹配元素替换每个目标元素
 <script type="text/javascript">
    //只克隆节点,不克隆事件
    $(".bt1").on('click', function() 
    {
        //找到内容为第二段的p元素,通过replaceWith删除并替换这个节点
        $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
    })
    //找到内容为第六段的p元素,通过replaceAll删除并替换这个节点
    $(".bt2").on('click', function() 
    {
        $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
    })
</script>

wrap()和unwrap()

<!--wrap()-->
<script type="text/javascript">
    $(".aaron1").on('click', function() {
     //给所有p元素，增加父容器div
     $('p').wrap('<div></div>')
 });
 $(".aaron2").on('click', function() {
    $('a').wrap(function() 
     {
         return '<div class="' + $(this).text() + '"></div>';
     })
 })
</script>
<!--unwrap()-->
<script type="text/javascript">
    $(".aaron1").on('click', function() 
    {
        //找到所有p元素，删除父容器div
        $('p').unwrap('<div></div>')
    })
        //找到所有p元素，删除父容器div
        $('a').unwrap(function() 
        {
            return '<div></div>';
        })
    })
</script>
<!--wrapAll()-->
<script type="text/javascript">
    $(".aaron1").on('click', function() 
    {
    //给所有p元素，增加父容器div
        $('p').wrapAll('<div></div>');
    })
    $(".aaron2").on('click', function() 
    {
    //wrapAll接受一个回调函数,每一次遍历this都指向了合集中每一个a元素
        $('a').wrapAll(function() 
        {
            return '<div></div>'
        })
})
</script>
<!--wrapInner()-->
<script type="text/javascript">
    $(".aaron1").on('click', function() 
    {
        //给所有p元素，增加内部包裹父容器div
       $('p').wrapInner('<div></div>');
    })
    $(".aaron2").on('click', function() 
    {
        //wrapInner接受一个回调函数,每一次遍历this都指向了合集中每一个a元素
        $('a').wrapInner(function() 
        {
            return '<div></div>'
        })
    })
</script>

方法	说明
.wrapInner( wrappingElement )	给集合中匹配的元素的内部，增加包裹的HTML结构
.wrapInner( function )	允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容
.wrapAll( wrappingElement )	给集合中匹配的元素增加一个外面包裹HTML结构
.wrapAll( function )	一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象
.wrap( function )	一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象
.replaceWith( newContent )	用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
.replaceAll( target )	用集合的匹配元素替换每个目标元素

jQuery遍历

children()方法

<!--children()和children(':last')-->
<script type="text/javascript">
    $("#bt1").click(function() {
        $('.div').children().css('border', '3px solid red');
    })
    $("#bt2").click(function() {
        //找到所有class=div的元素，找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色
        $('.div').children(':last').css('border', '3px solid blue')
    })
</script>

find()方法

<script type="text/javascript">
$("button:first").click(function() 
{
    $('.left').find('li:last').css('border', '1px solid red')
})
$("button:last").click(function() 
{
    //找到所有p元素，然后筛选出子元素是span标签的节点
    //改变其字体颜色
    var $spans = $('span');
    $("p").find($spans).css('color', 'red');
})
</script>

parent()方法

<script type="text/javascript">
$("button:first").click(function() {
    $('.level-3').parent().css('border', '1px solid red')
})
$("button:last").click(function() {
    //找到所有class=item-a的父元素
    //然后给每个ul,然后筛选出最后一个，加上蓝色的边
   $('.item-a').parent(':last').css('border', '1px solid blue')
})
</script>

parents()方法

<!--parents()在DOM树中搜索到元素的祖先，从有序的向上匹配元素，返回的元素秩序是从离他们最近的父级元素开始-->

<script type="text/javascript">
$("button:first").click(function() {
   $('.item-b').parents().css('border', '2px solid red')
})
$("button:last").click(function() {
    //找到当前元素的所有祖辈元素,筛选出class="first-div"的元素,并且附上一个边
    $('.item-b').parents('.first-div').css('border', '2px solid blue')
})
</script>

closest()方法

<script type="text/javascript">
$("button:first").click(function() {
    $('li.item-1').closest('.level-2').css('border', '1px solid red')
})
$("button:last").click(function() {
    var itemB = $('.item-b')
    $('li.item-1')
        .closest(itemB)
        .css('border', '1px solid blue');
})

closest()和parents() 的区别

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

next()方法、prev()方法和siblings()

<script>
    <!--next-->
    $('.item-2').next().css('border', '1px solid red')；
    $('.item-2').next(':first').css('border', '1px solid blue')
    <!--prev-->
    $('.item-2').prev().css('border','1px solid red')
    $('.item-3').prev(":last").css('border', '1px solid blue') 
    <!--siblings-->
    $('.item-2').siblings().css('border','1px solid red')
    $('.item-2').siblings(':last').css('border', '2px solid blue')       
</script>

add()

<script type="text/javascript">
    $("button:first").click(function() {
     //把p元素加到li合集中
     $('li').add('p').css('background', 'red')
})
    $("button:last").click(function() {
     //把html结构'<p>新的p元素</p>',加入到li的合集中，为了能够在页面上显示
     //需要在重新appendTo要指定的节点处,值得注意：整个结构位置都改变了
     $('li').add('<p>新的p元素</p>').appendTo($('.right'))
})

each()

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

<script type="text/javascript">
    $("button:first").click(function() {
     //把p元素加到li合集中
     $('li').add('p').css('background', 'red')
})
    $("button:last").click(function() {
     //把html结构'<p>新的p元素</p>',加入到li的合集中，为了能够在页面上显示
     //需要在重新appendTo要指定的节点处,值得注意：整个结构位置都改变了
     $('li').add('<p>新的p元素</p>').appendTo($('.right'))
})