脚本宝典收集整理的这篇文章主要介绍了js实例教程-JQuery基础总结一：DOM篇，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

基础-DOM篇

1.节点创建于属性的处理

[plain] view plain copy

var $body = $('body');  

$body.on('click', function() {  

        //通过jQuery生成p元素节点  

        var p = $("<p class='right'><p class='aaron'>动态创建p元素节点</p></p>");  

        $body.append(p);  

    })  

2.DOM内部插入append()与appendTo()     (顺序相反的两个方法)    [添加为子元素]

[plain] view plain copy

append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。  

$("#bt1").on('click', function() {  

            //.append(), 内容在方法的后面，  

            //参数是将要插入的内容。  

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

        })；  

appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。  

$("#bt2").on('click', function() {  

            //.appendTo()刚好相反，内容在方法前面，  

            //无论是一个选择器表达式 或创建作为标记上的标记  

            //它都将被插入到目标容器的末尾。  

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

        })；  

3.DOM内部插入after()与before()      [添加为兄弟元素]

[html] view plain copy

after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入  

$("#bt1").on('click', function() {  

        //在匹配test1元素集合中的每个元素前面插入p元素  

        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>');  

    })；  

before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插  

$("#bt2").on('click', function() {  

        //在匹配test1元素集合中的每个元素后面插入p元素  

        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>');  

    })；  

4.DOM内部插入prepend()与perpendTo()        [添加为子元素]

[html] view plain copy

.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).  

$("#bt1").on('click', function() {  

        //找到class="aaron1"的p节点  

        //然后通过prepend在内部的首位置添加一个新的p节点  

        $('.aaron1') .prepend('<p>prepend增加的p元素</p>');  

    })；  

.prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同  

$("#bt2").on('click', function() {  

        //找到class="aaron2"的p节点  

        //然后通过prependTo内部的首位置添加一个新的p节点  

        $('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))  

    })；<span style="font-family:'华文中宋';font-size:12pt;"></span>  

5.DOM外部插入insertAfter()与insertBefore()

[html] view plain copy

insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入  

$("#bt1").on('click', function() {  

        //在test1元素前后插入集合中每个匹配的元素  

        //不支持多参数  

        $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"));  

    });  

insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入  

$("#bt2").on('click', function() {  

        //在test2元素前后插入集合中每个匹配的元素  

        //不支持多参数  

        $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"));  

    });<span style="font-family:'华文中宋';font-size:12pt;"></span>  

6.DOM节点删除之empty()的基本用法

[html] view plain copy

$("#test").empty()；   只会移除所有子节点，该节点本身并不会被移除  

7.Dom节点删除之remove()用法

[html] view plain copy

remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。  

$('.test').remove();  

--------------------------------------------------ps  

$("p").remove(":contains('3')")  

$("p").filter(":contains('3')").remove();  

$("p:contains('3')").remove();<span style="font-family:'华文中宋';font-size:12pt;"></span>  

8.Dom节点删除之保留数据的删除操作detach()

[html] view plain copy

让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。  

var p;  

    $("#bt1").click(function() {  

        if (!$("p").length) return; //去重  

        //通过detach方法删除元素  

        //只是页面不可见，但是这个节点还是保存在内存中  

        //数据与事件都不会丢失  

        p = $("p").detach();  

    });  

  

    $("#bt2").click(function() {  

        //把p元素在添加到页面中  

        //事件还是存在  

        $("body").append(p);  

    });  

9.DOM拷贝

[html] view plain copy

.clone()复制结构，事件丢失   ||  .clone()复制结构，事件     元素数据（data）内对象和数组会被共享，不会复制  

$(".aaron1").on('click', function() {  

            $(".left").append( $(this).clone().css('color','red') );  

        })；  

$(".aaron2").on('click', function() {  

            console.log(1)  

            $(".left").append( $(this).clone(true).css('color','blue') );  

        })；  

10.DOM替换replaceWith()与replaceALL()   (顺序相反的两个方法)

[html] view plain copy

replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合  

$(".bt1").on('click', function() {  

        //找到内容为第二段的p元素  

        //通过replaceWith删除并替换这个节点  

        $(".right > p:first p:eq(0)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>');  

    })；  

replaceAll()替换的目标与源相反，返回替换的新节点  

$(".bt2").on('click', function() {  

        $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > p:last p:last');  

    })；  

11.DOM包裹wrap()方法

[html] view plain copy

wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构  

$(".aaron1").on('click', function() {  

        //给所有p元素，增加父容器p  

        $('p').wrap('<p></p>')；  

    })；  

12.DOM包裹unwrap()方法

[html] view plain copy

将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。  

$(".aaron1").on('click', function() {  

        //找到所有p元素，删除父容器p  

  

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

    })；  

13.DOM包裹wrapAll()方法

[html] view plain copy

.wrapAll()给集合中匹配的元素增加一个外面包裹HTML结构  

$('p').wrapAll('<p></p>')   

14.DOM包裹wrapInner()方法

[html] view plain copy

.wrapInner() 给集合匹配的元素内部，增加包裹的HTML结构  

$('p').wrapInner('<p></p>')    <p>233</p>   -> <p><p>233</p></p>  

15.jq遍历之children()方法

[html] view plain copy

$('.p').children()  得到所有子节点（第一层）  

$('.p').children().eq(0) 得到所有子节点的第一个子节点  

$('.p').children(':last')  得到所有子节点的最后一个节点   【筛选器】  

16.jq遍历之find()方法

[html] view plain copy

$('.left').find('li')   获取class=left的下层节点li，无论是儿子还是孙子  

$('.left').find('li:last')   获取最后一个li节点  【筛选器  等价于 $('.left li:last')】  

优点：  

JQuery采取的是从右至左的顺序，而形如$("#tab p")使用从右至左的顺序的话效率将会很低（即先找出所有的p，再找id为tab的父元素），此处使用find将处理顺序变为从左至右，即$("#tab").find("p")，在DOM树非常复杂的情况下可以提高效率。  

17.jq遍历之parent()方法

[html] view plain copy

$('.level-3').parent().css('border','1px solid #666');  

$('.item-a').parent(':last').css('border', '1px solid blue');     【筛选器】  

18.jq遍历之parents()方法

[html] view plain copy

parents()方法是查找所有上层元素【parents()与parent()的区别和find()与children()的区别一样】  

$('.item-b').parents()       所有上次元素  

$('.item-b').parents('.first-p')   class=first-p的上层元素 【筛选器】  

19.jq遍历之closest()方法

[html] view plain copy

粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素  

区别：  

        起始位置不同：.closest开始于当前元素 .parents开始于父元素  

        遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合  

20.jq遍历之next()方法

[html] view plain copy

紧邻当前元素的下一个元素  

$('.item-2').next().css('border', '1px solid blue')     所有class=item-2的元素的紧邻兄弟节点  

$('.item-2').next(':first').css('border', '1px solid blue')   所有class=item-2的元素的紧邻兄弟节点中的第一个节点  

21.jq遍历之prev()方法 

[html] view plain copy

紧邻当前元素的上一个元素  

22.jq遍历之siblings()方法

[html] view plain copy

查询该节点的所有兄弟节点  

$('.item-2').siblings() .css('border','1px solid red');  

$('.item-2').siblings(':last') .css('border','1px solid red');    class=item-2的节点的所有兄弟节点的集合的最后一个节点  

23.jq遍历之add()方法

[html] view plain copy

在已经确定的jq集合里添加新的元素，形成新的集合（选取复杂集合）  

$('li').add('p').css('background', 'red');  

24.jq遍历之each()方法

[html] view plain copy

//遍历所有的li  

//修改每个li内的字体颜色  

$("li").each(function(index, element) {  

            $(this).css('color','red');  

        });  

$("li").each(function(index, element) {     //回掉函数  

            if (index % 2) {  

                $(this).css('color','blue');  

            }  

        });  

.总结

       JQ的操作比js真心简单多了>.<

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-JQuery基础总结一：DOM篇全部内容，希望文章能够帮你解决js实例教程-JQuery基础总结一：DOM篇所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。