jQuery文档处理

        

                   

$(function () {

            内部插入：append()，appendTo()，prepend()，prependTo()

            1.append() 在 xx 中追加(最后插入) yy，在被选元素的结尾插入内容（结束标签之前插入）（剪切粘贴）

            (1)选择id为div2的元素，在它的结束标签之前插入内容为“像每个匹配的元素内部追加内容”的p标签

            $("#div2").append("<p>向每个匹配的元素内部追加内容</p>");

            (2)获取id为p1的标签，把它插入到id为div2的标签元素的结束标签之前(相当于一个剪切粘贴的效果)

            $("#div2").append($("#p1")); 

            2.appendTo() 把 yy 追加(最后插入)到 xx 中；把所有匹配的元素追加到另一个指定的元素的元素集合中（剪切粘贴）

            (1)把内容为“把所有匹配的元素追加到另一个指定的元素元素集合中。”的p标签添加到id为div2的标签元素里

            $("<p>把所有匹配的元素追加到另一个指定的元素元素集合中。</p>").appendTo($("#div2"));

            (2)把id为p2的元素插入到id为div2的标签元素里面

           $("#p2").appendTo($("#div2"));

           3.prepend() 在 xx 内部的最前面插入 yy，在被选元素的开头插入内容（开始标签之后插入）（剪切粘贴）

            (1)选择id为div2的标签元素，在它的开始标签之后插入内容为“向每个匹配的元素内部前置内容”的p标签

            $("#div2").prepend("<p>向每个匹配的元素内部前置内容。</p>");

            (2)把id为p3的元素插入到id为div1的标签元素的开始标签之后

            $("#div2").prepend($("#p3"));

            4.prependTo() 把 yy 插入到 xx 内部的最前面，把所有匹配的元素前置到另一个、指定的元素的元素集合中（剪切粘贴）

            (1)把内容为“把所有匹配的元素前置到另一个、指定的元素集合中”的p标签添加到id为div2的标签元素里

            $("<p>把所有匹配的元素前置到另一个、指定的元素元素集合中</p>").prependTo($("#div2"));

            (2)把id为p4的元素插入到id为div2的标签元素里面

           $("#p4").prependTo($("#div2"));

            外部插入：after()，insertAfter()，before()，insertBefore()

            5.after()在被选元素之后插入内容

            (1)在id为div1的元素后面添加内容为“匹配的元素之后插入内容”的p标签

           $("#div1").after("<p>匹配的元素之后插入内容</p>");

            (2)把id为p5的元素插入到id为div1的元素后面

           $("#div1").after($("#p5"));

            6.insertAfter()在被选元素后面插入HTML元素

            (1)在id为div1的元素后面添加内容为“把所有匹配的元素插入到另一个、指定的元素集合的后面”的p标签

            $("<p>把所有匹配的元素插入到另一个、指定的元素元素集合的后面</p>").insertAfter($("#div1"));

            (2)把id为p6的标签元素插入到id为div1的元素后面

            $("#p6").insertAfter($("#div1"));

            7.before()在被选元素之前插入内容

            (1)在id为div1的元素前面添加内容

           $("#div1").before("<p>在每个匹配的元素之前插入内容</p>");

            (2)把id为p7的标签元素插入到id为div1的元素前面

           $("#div1").before($("#p7"));

            8.insertBefore()在被选元素前面插入HTML元素

            (1)在id为div1的元素前面添加内容

            $("<p>把所有匹配的元素插入到另一个、指定的元素元素集合的前面</p>").insertBefore($("#div1"));

            (2)把id为p8的标签元素插入到id为div1的元素前面

            $("#p8").insertBefore($("#div1"));

 

            包裹：wrap(),unwrap(),wrapAll(),wrapInner()

            9.wrap() 包裹，指定的HTML元素来包裹每个被选元素

            (1)给h1标签的外面包裹一层id为div3且文字颜色为黄色的div标签

           $("h1").wrap("<div id='div3' style='color:yellow'></div>");

            (2)给p标签的外面包裹一层id为div3的div标签

           $("p").wrap($("#div3"));

            (3)基于上行内容，则为：给p标签的外面包裹一层自带内容的h1标签，再给h1标签的外面包裹一层id为div2且文字颜色为红色的div标签，给p标签的外面包裹一层类名为被选中的p标签本身的文本内容的div标签

           $("p").wrap(function () {

                return "<divclass='" + $(this).text() + "'></div>";

            });

 

            10.unwrap()移除被选元素的父元素

           $("p").unwrap();

            11.wrapAll() 将所有匹配的元素用单个元素包裹起来 ，会破坏原有文档结构

            (1)将所有h1标签包裹到一个类名为div4的div标签里

            $("h1").wrapAll("<divid='div4' style='color:red'></div>");

            (2)DOM元素，将所有p标签包裹到新建的div标签中

           $("p").wrapAll(document.createElement("div"));

 

            12.wrapInner()使用指定的HTML元素来包裹每个被选元素中的所有内容（innerHTML）

            (1)把所有p标签的文本外面包裹一层b标签，包裹文本，不包裹标签

           $("p").wrapInner("<b></b>");

            (2)把所有h1标签的文本外面包裹一层新建的b标签

            $("h1").wrapInner(document.createElement("b"));

            (3)给p标签的外面包裹一层类名为被选中的p标签本身的文本内容的div标签

           $("p").wrapInner(function(){

                return '<divclass="' + $(this).text() + '" />';

            });

 

            替换：replaceWith()，replaceAll()

            13.replaceWith()替换 把所有 x 替换成 y，将所有匹配的元素替换成指定的HTML元素或DOM元素

            (1)把页面上所有的p标签全部替换成“<h5>标题</h5>”

            $("p").replaceWith("<h5>标题</h5>");

            14.replaceAll() 替换 用 y 替换所有x，用匹配的元素替换掉所有selector匹配的元素

            (1)把页面上的h1标签全部替换成“<h5>标题</h5>”

            $("<h5>标题</h5>").replaceAll("h1");

 

            删除：empty()，remove()，detach()

            15.empty() 清空，删除匹配的元素集合中所有的子节点，从被选元素中删除子元素

            (1)删除id为div1的元素里的所有子元素

           $("#div1").empty();

            16.remove()从DOM中删除所有匹配的元素，绑定的事件、附加的数据等都会被移除

            (1)所有移除的对象都在objRemove对象中，删除类名为pC1的元素

            var objRemove=$(".pC1").remove();

            console.log(objRemove);

            (2)把objRemove删除的索引值为0的元素插入id为div1的元素里的结尾处

           $("#div1").append(objRemove[0]);

            17.detach()从DOM中删除所有匹配的元素，绑定的事件、附加的数据等都会被保留下来

            (1)删除类名为pC2的元素

            var objDetach=$(".pC2").detach();

            console.log(objDetach);

            (2)把objRemove删除的元素中索引值为0的元素插入id为div2的元素里的结尾处

            $("#div2").append(objDetach[0]);

            复制：clone()

            18.clone()生成被选元素的副本，包含子节点、文本和属性

            (1)把id为p4的元素复制并插入到id为div2的元素里的结尾处（复制粘贴）

            $("#p4").clone().appendTo($("#div2"));

 

19.给类名为pC1的元素绑定点击事件，输出绑定点击事件后被点击的元素的文本内容

            $(".pC1").click(function() {

                console.log($(this).text());

            });

            20.为元素绑定点击事件，再用remove()以及detach()删除元素之后再插入

            比较2个元素插入之后的区别

            (1)给类名为pC2的元素绑定点击事件，点击后更改被选中元素的文字颜色

            $(".pC2").click(function() {

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

            })；

 

            (2)不保留绑定的事件、附加的数据等

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

                $("#div2").append($(".pC2:eq(0)").remove());

            })；

            (3)保留了绑定的事件、附加的数据等

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

               $("#div1").append($(".pC2:eq(1)").detach());

            })

        });

 

以上就是我的分享，希望可以帮到你们，新手上道，请多指教。如果有做的不好的地方，欢迎来评论区教导！