jQuery中的DOM操作【续】

一、复制节点
$(选择器字符串).clone(false)    【返回克隆的节点对象】
参数：
false,浅复制,复制元素但不复制元素中所绑定的事件【默认为false】
true,深复制,复制元素且复制元素中所绑定的事件
注：
js的原生的cloneNode()方法复制节点    深复制代表复制子节点    浅复制代表不复制子节点    与事件没有关系

二、替换节点    
下面函数的一些相关说明：
a、参数可能是HTML字符串，DOM元素，或者jQuery对象
b、会删除与节点相关联的所有数据和事件处理程序

replaceWith()    【用参数节点替换自身】【返回被替换的元素】
用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
eg：

    $('div').replaceWith('<span>hello<span>');    //使用span节点替换所有div节点【每个div均用span节点替换】

replaeAll()    【自身替换参数中的节点】
替换节点与被替换节点与replaceWith()相反
eg：

    $('<span>hello</span>').replaeAll('div')    //使用span节点替换所有div节点【每个div均用span节点替换】

三、包裹节点          
wrap([wrappingElement])
在每个匹配的元素外层包上一个html元素。

wrapAll([wrappingElement])
将所有匹配的元素用一个元素来包裹，可以嵌套多层，但是最内层只能有一个元素。
所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的HTML结构进行包裹。

wrapInner([wrappingElement])
每个匹配元素里面内容(子元素)都会被这种结构包裹【匹配元素里面需要有内容；如果为空则最后一个空元素也会出现包裹html元素】

四、节点遍历    
注意:
下面这些方法可以用来解析html文档和xml文档【html文档和xml文档都可以转换为dom模型】
也就是说在ajax中，如果后台传过来的是xml文档，那么我们使用jquery也可以使用下面方法解析      

children([selector])    【获取匹配元素的子元素集合】
用于取得匹配元素的子元素集合
eg:

    $(".content").children(".inner");    //获取类名content的所有子元素【有参数则再过滤出类名为inner的子元素】
    $(".content>.inner");    //与上面效果是一样的

find(selector)　　【获取所有匹配元素中符合参数的所有后代元素】
在当前元素对象中的子元素中查找，和参数所匹配的所有的后代元素
eg：            

    $(".content").find(".inner");    //获取类名content的所有后代中类名为inner的元素
    $(".content .inner");    //与上面效果是一样的

next([selector])    【获取下一个兄弟元素】
取得匹配的元素集合中每一个元素紧邻的后面兄弟元素。

nextAll([selector])    【获取后面的兄弟元素】
查找当前元素之后所有的同辈元素。
    
prev([selector])    【获取前一个兄弟元素】
取得匹配元素前面紧邻的兄弟元素

prevAll([selector])    【获取前面所有的兄弟元素】
查找当前元素之前所有的同辈元素

siblings([selector])　　【获取所有兄弟元素】
取得匹配元素前后所有的兄弟元素

closest( selector)    【获取最近的匹配元素】
取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素

filter(selector)    【继续过滤原来匹配元素】
把当前所选择的所有元素再进行筛选过滤
    
parent([selector])    【获取父元素】
取得匹配元素集合中，每个元素的父元素

parents([selector])    【获取祖先元素】
获得集合中每个匹配元素的祖先元素

 

转载于:https://www.cnblogs.com/nzcblogs/p/11266913.html