jquery之dom学习

jquery对dom的操作是很重要的，在网站中需要用到jquery的地方最多的也就是对dom的操作了，所以学好jquery对dom的操作是多么重要的事。

append()：向每个匹配的元素内部追加内容
prepend()：向每个匹配的元素内部前置内容
appendTo()：把所有匹配的元素追加到另一个指定元素的集合中
prependTo()：把所有匹配的元素前置到另一个指定的元素集合中

.after(content) ：在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点
.before(content)： 在匹配元素前面插入指定内容
insertAfter()：将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；
insertBefore()：将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；

empty() ：顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。
remove() ：remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
detach()：通过detach方法删除元素,只是页面不可见，但是这个节点还是保存在内存中,数据与事件都不会丢失
.clone()方法：深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
//clone处理一
$("div").clone()   //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
.replaceAll( target )：用集合的匹配元素替换每个目标元素
.wrap(wrappingElement)： 在集合中匹配的每个元素周围包裹一个HTML结构，$('p').wrap('dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68')
.unwrap() ：与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身(和兄弟元素,如果存在)再原来的位置
.wrapAll()：给集合中匹配的元素增加一个外面包裹HTML结构
wrapInner()：给集合中匹配的元素的内部，增加包裹的HTML结构

children()方法：是返回匹配元素集合中每个元素的所有子元素
.find()方法：
方法ind是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。
find只在后代中遍历，不包括自己。
选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。
parent找父类.parent()

parents()方法：closest()方法closest()方法接受一个匹配元素的选择器字符串从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

例如：在div元素中，往上查找所有的li元素，可以这样表达

$("div").closet("li')

next()方法查找后面一个同辈元素

$("li.item-2").css("border","3px solid red");

prev()方法查找前面一个同辈元素

$("li.item-2").prev().css("border","3px solid red");

siblings()方法查找同辈元素

$(".item-2").siblings().css("border","3px solid red");

add()方法

$('li').add('p')

each()方法

$("ul li").each(function(index, element) {  
     index 索引 0,1  
     element是对应的li节点 li,li  
     this 指向的是li  
})

以上就是 jquery之dom学习 的所有内容了，希望对大家有所帮助吧！

相关推荐：

jQuery加载一个html页面到指定的div里面

jQuery实现单击和鼠标感应事件

Jquery对新插入的节点 绑定Click事件失效的解决方法

以上是jquery之dom学习的详细内容。更多信息请关注PHP中文网其他相关文章！