jQuery文档处理

外部插入

//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元素
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值