使用jQuery进行DOM操作详解编程语言

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);

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/16477.html