HTML部分：

 

1、内部插入--->子节点

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

　　　　    //append追加  子节点后面

                $("ul").append("<li>列表 append</li>");
 
                //appendTo  子节点后面添加
                // $("<li>列表 append</li>").appendTo($("ul"));
            })
$(".prepend").click(function () {
                //prepend  子节点前面
                $("ul").prepend("<li>列表 prepend</li>");
 
                //prependTo 子节点前面
                // $("<li>列表 prepend</li>").prependTo($("ul"));
               
            })
 
2、外部插入--->兄弟节点
 $(".before").click(function () {
                // before ul外面的上面
                $("ul").before("<li>列表 append</li>");
            })
$(".after").click(function () {
                //after ul外面的下面
                $("ul").after("<li>列表 append</li>");
            })
 
3、包裹--->父节点
$(".wrap").click(function () {
                //wrap 包裹住整个ul
                $("ul").wrap("<div style='color:red'></div>");
            })
 
4、替换  修改
$(".replaceWith").click(function () {
                //replaceWith  替换 成指定的元素
　　　　$("li:first").replaceWith("<li>列表 new</li>");
            })
 
5、删除
 $(".empty").click(function () {
                //empty 清空内容
                $("li:first").empty();
            })
 $(".remove").click(function () {
                //remove 删除元素  全部删除
                $("li:first").remove();
            })
 
6、克隆/复制
 $(".clone").click(function () {
                //clone 克隆/复制
                $("li:first").clone().appendTo("ul");
            })
 
7、事件 
click 点击事件  点击一下全部显示
$("li").click(function () {
                 console.log($(this).text());
            })
 
点击ul里面的li 一个一个显示
$("ul").on("click","li",function () {
                 console.log($(this).text());
             })
 
单击双击 之后显示四个所点击的元素
$("ul").on("click dblclick","li",function () {
                console.log($(this).text());
            })
8、筛选   查找

closest：closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。                   closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

HTML 代码:
<ul><li></li><li></li></ul>
jQuery 代码:
$("li:first").closest(["ul", "body"]);
结果:
[ul, body]

 

find：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

HTML 代码:
<p><span>Hello</span>, how are you?</p>
jQuery 代码:
$("p").find("span")
结果:
[ <span>Hello</span> ]

siblings：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代码:
$("div").siblings()
结果:
[ <p>Hello</p>, <p>And Again</p> ]