Dom 操作

JQuery文档处理：

1.内部插入 =>子节点

append：向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，

将它们添加到文档中的情况类似。

例：

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

                $("ul").append("<li>列表 append</li>");

                $("<li>列表 append</li>").appendTo($("ul")); 相反

            })

HTML内容：

<button class="append">append</button>

 <ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

        <li>列表4</li>

        <li>列表5</li>

    </ul>

 

prepend：向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式。

例：

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

                $("ul").prepend("<li>列表 prepend</li>");

            })

HTML内容：

<button class="prepend">prepend</button>

 <ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

        <li>列表4</li>

        <li>列表5</li>

    </ul>

 

2.外部插入 =>兄弟节点

before：在每个匹配的元素之前插入内容。

例：

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

                $("ul").before("<li>列表 before</li>");

  })

HTML内容：

<button class="before">before</button>

 <ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

        <li>列表4</li>

        <li>列表5</li>

    </ul>

 

after：在每个匹配的元素之后插入内容。

例：

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

                $("ul").after("<li>列表 after</li>");

  })

HTML内容：

<button class="after">after</button>

 <ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

        <li>列表4</li>

        <li>列表5</li>

    </ul>

 

3.包裹 => 父节点

wrap：把所有匹配的元素用其他元素的结构化标记包裹起来。

例：

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

                $("ul").wrap("<div style='color:red'></div> ");

 })

HTML内容：

<button class="wrap">wrap</button>

 <ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

        <li>列表4</li>

        <li>列表5</li>

    </ul>

 

4.替换

replaceWith：将所有匹配的元素替换成指定的HTML或DOM元素。

例：

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

                $("li:first").replaceWith("<li>列表 new</li> ");

  })

HTML内容：

<button class="replaceWith">replaceWith</button>

 <ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

        <li>列表4</li>

        <li>列表5</li>

    </ul>

 

5.删除

empty：删除匹配的元素集合中所有的子节点。

例：

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

                 $("li:first").empty();

            })

HTML内容：

<button class="empty">empty</button>

 <ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

        <li>列表4</li>

        <li>列表5</li>

    </ul>

 

remove：从DOM中删除所有匹配的元素。

例：

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

                 $("li:first").remove();

            })

HTML内容：

<button class="remove">remove</button>

 <ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

        <li>列表4</li>

        <li>列表5</li>

    </ul>

 

6.复制

clone：克隆匹配的DOM元素并且选中这些克隆的副本。

例：

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

                 $("li:first").clone().appendTo($("ul"));

            })

           

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

                console.log(this).text()

            })

            // 子选择器

            $("ul").on("click","li",function(){

                console.log(this).text()

            })

            //可绑定多个事件 执行双击事件

            // $("ul") 委托事件

            $("ul").on("click dbclick","li",function(){

                console.log(this).text()

            })

            //

            // $("li:first") = $("li").first()

            //

HTML内容：

 <button class="clone">clone</button>

 <ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

        <li>列表4</li>

        <li>列表5</li>

    </ul>