7：jquery内的文档处理

1：内部插入
append 追加到当前内容之后

$(".block").append($(".small"));
//fn 回调函数 参数是index html 当前元素的html内容
$(".block").append(function(index,html){
    return $(".small");
});

appendTo 追加当前元素之后 位置颠倒

$(".small").appendTo($(".block"));

prepend 追加到当前元素之前

$(".block").prepend($(".small"));
//fn 回调函数 参数是index html 当前元素的html内容
$(".block").prepend(function(index,html){
    return $(".small");
});

prependTo 追加到当前元素之前 位置颠倒

$(".small").prependTo($(".block"));

jquery里面如何创建dom元素 jquery dom

var str="<div class='child2'></div>";
$(".block").html(function(index, old){
    return old+str;
});

var str="<div class='child2'></div>";
var ele=$("<div></div>");

给创建的jquery对象添加类

   //1：直接在标签上写
    var ele=$("<div class='child2'></div>");
    //将创建的dom 追加到block
    $(".block").append(ele);
   //2：使用addClass()
    ele.addClass("child2");

2：外部插入
after 插入元素之后

$(".child").after($(".small0"));
//fn index 索引
$(".child").after(function(index){
    return "new";
    return "<div class='child2'></div>";
});

before 插到元素之前

$(".child1").before($(".small0"));
//fn
$(".child1").before(function(index){
    return "before new";
    return $("small"+index);
});

insertAfter 追加到元素之后 跟after区别前后位置颠倒

$(".small0").insertAfter($(".child"));

insertBefore

$(".small0").insertBefore($(".child"));

3：包裹元素
创建元素

var ele=$("<div></div>")
ele.addClass("par");

warp 包裹 小在前包大包

$(".child").wrap(ele);
$(".child").wrap("<div class='par'></div>");
//fn index 当前元素的索引
$(".child").warp(function(index){
    return ele;
});

unwrap 移除指定元素的父元素

$(".c").unwrap();

一对一包

$("p").wrap("<div></div>");

将全部的元素包

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

wrapInner 将元素的内容包起来

    $("body").wrapInner("<div></div>");
    //fn
    $("body").wrapInner(function(index){
      return "<div></div>"
    });

4：元素的替换
将div替换为文本框

//创建文本框
var ipt=$("<input type='text' class='pr'/>");
ipt.val($(".pr").html());//拿到的值只有一个
console.log(ipt.val($(".pr").html()));
$(".price").replaceWith(ipt);

回调函数

$(".price").replaceWith(function(index,html){
    ipt.val(html);
    return ipt;
});

replaceAll 前替换后

ipt.replaceAll($(".price"));

5：删除
empty 删除父元素所有的子节点

$("ul").empty();

remove 删除当前元素

$("ul>li").remove();
//remove 参数
$("ul>li").remove(".box");//等价
$(".box").remove();

detach 从jquery对象里面的没有删除 只是界面没有了 数据和事件之类的还在

    $("ul>li").detach(".box");
    //该方法使用时不能用匹配元素直接删除，得用父元素寻找子元素的方法来进行删除 这样jquery对象的删除元素还在
    $(".box").detach();
    console.log($("ul>li"));

6：克隆
clone

$(".small").appendTo($(".block"));
//.small复制
$(".small").clone().appendTo($(".block"));
//参数问题  布尔值
//false 只是克隆了dom元素 浅克隆
//true 除了克隆dom元素，还克隆当前事件 深克隆