jQuery DOM操作

先引入jQuery文件，入口函数：

$(function(){

});

</script>

1.内部插入 => 子节点

append(content|fn)

向每个匹配的元素内部追加内容。 append和appendTo效果一样

prepend(content)

向每个匹配的元素内部前置内容。prepend和prependTo效果一样

$(".append").click(function(){ //append在所有子元素的后面插入
         $("ul").append("<li>列表 append</li>"); 和下面的效果一样
         $("<li>列表 append</li>").appendTo($("ul"));
});
$(".prepend").click(function(){
         //prepend在所有子元素的前面插入
         $("ul").prepend("<li>列表 prepend</li>");
});

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

after(content|fn)

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

before(content|fn)

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

$(".before").click(function(){//在ul的上面
                $("ul").before("<li>列表 before</li>");
});
$(".after").click(function(){//在ul的下面
                $("ul").after("<li>列表 after</li>");
});

3.包裹 => 父节点

wrap(html|element|fn)

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

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

4.修改

replaceWith(content|fn)

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

$(".replaceWith").click(function(){
         $("ul").replaceWith("<li>列表 new</li>");
});

5.删除

empty()

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

$(".empty").click(function(){//清空,内容
       $("li:first").empty();
});

remove([expr])

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

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

$(".remove").click(function(){
          $("li:first").remove();
});

6.克隆

clone([Even[,deepEven]])

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

            $(".clone").click(function(){
                $("li:first").clone().appendTo($("ul"));
            });

7.打印当前li的文本

          $("li").click(function(){
              console.log($(this).text()); 打印当前li的文本
          });

8.打印当前li的文本，因为新添加的li标签不能打印出来，所以可以用on事件

//on()多个事件用空格隔开
$("ul").on("click dblclick","li",function(){ //ul里面的li执行click事件
       console.log($(this).text()); //单击或双击打印当前的文本
});