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元素,还克隆当前事件 深克隆