jQuery DOM操作可像SQL操作那样简单分为增、删、改、查。可能这有些牵强,但是能帮助我们理解和记忆。
jQuery DOM操作——改: 一、DOM拷贝
jQuery DOM操作——改: 一、DOM拷贝
clone(),克隆,深度复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。
$("div").clone() //只克隆了结构,事件丢失
$("div").clone(true) //结构、事件与数据都克隆
二、DOM替换
- .replaceWith():用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
$("div:eq(1)").replaceWith("<div class='replaceWith'>replaceWith替换第二个div的内容</div>")
2 . .replaceAll()和.replaceWith()功能类似,但是目标和源相反
三、DOM包裹$("<div class='replaceAll'>replaceAll替换第二个div的内容</div>").replaceAll($("div:eq(1)"))
- .wrap(),在集合中匹配的每个元素周围包裹一个HTML结构
$("p").wrap("<div></div>") $("p").wrap(function() { return "<div><div/>"; //与第一种类似,只是写法不一样 })
2 . .unwrap(),作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟、子孙节点,如果存在)在原来的位置。
$("p").unwarp() $("p").unwrap(function() { return "<div></div>"; //与第一种类似,只是写法不一样 })
3 . .wrapAll():给集合中匹配的元素增加一个外面包裹HTML结构
$("p").wrapAll("<div></div>") $("p").wrapAll(function() { return "<div></div>"; //与第一种类似,只是写法不一样 })
4 . .wrapInner():给集合中匹配的元素的内部,增加包裹的HTML结构
$("div").wrapInner("<div></div>") $("div").wrapInner(function() { return "<div></div>"; //与第一种类似,只是写法不一样 })
点击查看更多内容
3人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦