IT虾米网

使用jQuery进行DOM操作详解

leader 2019年04月28日 编程语言 143 0

1、在元素内部插入DOM元素
插入到页面元素之后的方法:
append(content)向所有匹配元素的内部添加内容
如:$("#second").append($("#first")); 将fist的内容添加到second上面
appendTo()将匹配的元素追加到内容所指的那个元素之内,这里匹配的元素是追加对象,参数为被追加对象。
如:$("#first").appendTo("#second"); 将fist的内容添加到second上面
插入到页面元素之前的方法
prepend(content)向所有匹配元素的内部前置内容
如:$("#second").prepend($("#first")); 将fist的内容前置到到second上面
prependTo()将匹配的元素前置到内容所指的那个元素之内,这里匹配的元素是前置对象,参数为被前置对象。
如:$("#first").prependTo("#second"); 将fist的内容前置到second上面

2、在元素外部插入DOM元素
after(content) 在每个匹配的元素之后插入内容
$("#second").after("<b>测试after的使用</b>");在匹配的元素之后
insertAfter(content) $("#first").insertAfter("#second"); 将fist的内容插入到到second元素后面
before(content) 在每个匹配的元素之前插入内容
insertBefore(content) $("#first").insertBefore("#second"); 将fist的内容插入到到second元素前面

3、包裹DOM元素
使用指定的元素标记进行包裹
处理元素包裹的核心函数是wrap(elem) 把所有匹配的元素用其他元素的结构化标记包装起来,一个一个分别包裹

.test{ 
color:white; 
background-color:#CD5C5C; 
} 
.wrap{ 
background-color:green; 
}

调用方式:p#second").warp($(".test"))
wrapAll(elem) 将所有匹配的元素用单个元素包裹起来,匹配的元素作为整体进行包裹

使用HTML标记进行包裹
warp(html) 把所有匹配的元素用其他元素的结构化标记包裹起来,一个一个分别包裹
warpAll(selector) 将所有匹配的元素用单个元素包裹起来

包裹内部元素
warpInner(content) 将每个匹配元素的的子内容(包括文本节点)用DOM元素或者一个HTML结构包裹起来
调用方式:$("p").wrapInner("<b> </b>");
              $("p#second").warpInner($("div.test"));

4、替换DOM元素
replaceAll(selector) 用替换的元素替换掉所有selector匹配到的元素
调用方式: $("div.test").repalceAll($("p"));
$("div.test").replaceAll($("p#second"));
replaceWith(content) 将所有匹配的元素替换成指定的HTML或DOM元素
调用方式: $("p#second").replaceWith("div.test");

5、删除DOM元素
jQuery在页面上删除一个DOM的方式有两种,一种是”伪删除“,
即删除之后页面元素的标签还存在只是内容被删除,jQuery中相应的函数为empty();
调用方式:$("p#second").empty();
还有一种是真删除,这种删除将使该标签元素从页面上彻底消失,jQuery中相应的函数为remove([expr])
调用方式:$("p").remove("p#second");

6、克隆DOM元素
clone([true]) 克隆匹配的元素并且选中这些克隆的副本,为true以便复制所有的事件处理。
调用方式:$("div.test").clone().prependTo($("p#second"))
              $("this").clone(true).insertAfter(this);

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

jQuery 操作得到的元素详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。