操作：选择所有的li元素，之后把p元素也加入到li的合集中

<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>

处理一：传递选择器

$('li').add('p')

处理二：传递dom元素

$('li').add(document.getElementsByTagName('p')[0])

还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了

 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

通过clone(ture)传递一个布尔值ture用来指定深拷贝，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了。

empty只移除了指定元素中的所有子节点

1、class="item-1"的li元素这样写：li.item-1
2、class=".level-2"的ul元素这样写：ul.level-2
代码为：
$("button:first").click(function() {
$("li.item-1").closest("ul.level-2").css({"border":"1px solid red"});
})

这节：
.closest() 找长辈(从当前节点向上遍历,找到停止,返回零个或一个元素)
之前的：
.replaceWith 删除并替换节点（结合.replaceAll()来记）
.wrap 每个人加个爸爸
.unwrap 爸爸没了
.wrapAll 所有人加个爸爸
.wrapAll（function）每个人加个爸爸
.wrapInner 加个儿子
.children() 找儿子
.find() 找后代
.parent() 找爸爸
.parents() 找长辈(直接遍历到根元素,可能返回零个或一个或多个元素)

.find()方法要注意的知识点：

• find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。

• 与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。

• find只在后代中遍历，不包括自己。

• 选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。

注意重点：

.find()和.children()方法是相似的
1.children只查找第一级的子节点
2.find查找范围包括子节点的所有后代节点

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

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

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

    })

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

        //wrapAll接受一个回调函数

        //每一次遍历this都指向了合集中每一个a元素

        $('a').wrapAll(function() {

            return '<div></div>'

        })

    })

//只克隆节点

    //不克隆事件

    $(".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') )

    })

if ($("p").length==0) return; //去重
//if (！$("p").length) return; 效果一样的，意思是p标签长度为0的话，点击按钮返回，不操作

var p;

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

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

        //通过detach方法删除元素

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

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

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

    });

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

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

        //事件还是存在

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

    });

通过empty移除了当前div元素下的所有p元素
但是本身id=test的div元素没有被删除

经实际操作 总结如下：

.append() .prepend() .after() .before() 

都是方法（函数）在前，内容（参数）在后 可以支持多参数；

.appendTo() .prependTo() .insertBefore() .insertAfter() 都是内容（参数）在前，函数（方法）在后，不支持多参数

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

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

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

    })

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

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

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

    })

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

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

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

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

    })

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

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

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

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

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

    })

append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象