外部插入
//after(content|fn)
//before(content|fn)
//insertAfter(content)
//insertBefore(content)
after 插入元素之后
$(".child").after($(".small"));
//fn 回调函数 index 索引
$(".child").after(function (index){
return "<div class='child2'></div>"
});
before 插入到元素之前
$(".child1").before($(".small"));
//fn 回调函数 index 索引
$(".child1").before(function(index){
return $(".small"+index)
});
//insertAfter 追加到元素之后 和after 区别前后位置颠倒
$(".small0").insertAfter($(".child1"));
//insertBefore 追加到元素之前 和before 区别前后位置颠倒
$(".small0").insertBefore($(".child1"));
元素的替换
//replaceWith(content|fn)
//replaceAll(selector) 前替换后
var ipt = $("<input type='text' class='price'/>");
$(".price").replaceWith(ipt);
ipt.val($(".price").html());//43¥
//fn回调函数 index 索引 html 当前元素的html内容
$(".price").replaceWith(function (index, html) {
//ipt.val(html);
return ipt;
});
ipt.replaceAll($(".price"));
元素的包裹
//wrap(html|ele|fn)
//unwrap()
//wrapAll(html|ele)
//wrapInner(html|ele|fn)
var ele=$("<div></div>");
ele.addClass("par");
wrap 包裹
$(".child").wrap(ele);
$(".child").wrap("<div class='par'></div>");
//fn回调函数 index 索引
$(".child").wrap(function (index){
console.log(index);
return "<div class='par'></div>"
});
unwrap 移除指定元素的父元素
$(".c").unwrap();
wrap 一对一进行包含
$("p").wrap("<div></div>");
wrapAll 将匹配的元素全部包起来
$("p").wrapAll("<div></div>");
wrapInner 将元素的内容包裹起来
$("body").wrapInner("<div></div>");
fn回调函数 index 索引
$("body").wrapInner(function (index){
console.log(index);
return "<div></div>";
});
删除
//empty()
//remove([expr])
//detach([expr])
//empty 删除匹配元素所有的子节点
$("ul").empty();
//remove 移除当前的匹配元素
$("ul>li").remove();
$("ul>li").remove(".box");
//等价于
$(".box").detach();
console.log($("ul>li").detach(".box"));
//detach 删除元素之后 jquery 对象里面的没有删除 只是界面没有了 数据和事件之类的还在
//这个方法在使用的时候不能直接用匹配元素删除 得按照父元素找子元素的方式删除 这样的话 jquery对象里面的删除元素还在
复制
//clone([Even[,deepEven]])
$(".small").appendTo($(".block"));
//将蓝色块复制一个一个 追加进去
$(".small").clone(true).appendTo($(".block"));
//clone 参数
//true深度克隆 克隆dom元素以外 事件 之类
//false浅克隆 只是克隆了dom元素