wrap / unwrap / wrapAll / wrapInner
remove / detach
测试文件见前篇文章中的测试页面代码。点击此处可直接进入
wrap
在元素(标签)外包装一个或多个元素(标签),函数参数接受元素集合,也接受返回标签的回调函数作为参数。如通过在所在标签<span></span> 标签外包装<strong></strong>标签、给所有的段落包装<strong></strong>标签,使得文字变粗,或者给所选元素集合包装一个<div> 。
在使用的时候注意标签的嵌套是否合法,如给所有的段落外增加<strong></strong>就属于嵌套不合法。
$("span").wrap(""); //$("span").wrap(""); $("span").wrap(""); //像上面这样写也可以 //类为foo的span包装标签,其他span标签包装标签 $("span").wrap(function() { return $(this).is(".foo") ? "" : ""; });
unwrap
删除包住所选元素的元素,不接受参数,如要删除包住<span>元素的元素。
$("span").unwrap();
wrapAll
wrapAll将所选的元素集合都用一个元素包装,如将所有的段落用一个<div>包住,需要注意的是wrapAll是会移动元素的,在<span>元素集合上使用wrapAll,使用<strong>包住该元素集合。
var div = $("<div>", { "css" : {"background" : "yellow"} }); $("p").wrapAll(div); //注意元素的移动 $("span").wrapAll("");</div>
wrapInner
包裹元素内容,可以用标签包住元素内的所有内容,如将所有的段落文字变成粗体。
$("p").wrapInner("");
remove & detach
remove和detach用于删除DOM中的元素,其区别是remove直接删除选中的元素,detach除了删除选中的元素外,还保存了删除元素的数据。