jquery dom learning

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('

children() method: returns the matching elements in the collection All child elements of each element
.find() method:
Method ind is to traverse the descendants of each element in the current element collection. As long as they meet the requirements, it doesn't matter whether they are sons or grandsons.
Unlike other tree traversal methods, the selector expression is a required parameter for .find(). If we need to retrieve all descendant elements, we can pass the wildcard selector '*'.
find only traverses descendants, not including itself.
The selector context is implemented by the .find() method; therefore, $('.item-ii').find('li') is equivalent to $('li', '.item-ii') (Find the li tag under the tag with the class name item-ii).
parent finds the parent class.parent()

##parents() method: closest() method closest() method accepts a selector that matches elements characters StringStarts from the element itself, matches up to the superior element step by step on the DOM tree, and returns the first matched ancestor element

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

next() methodFind the next sibling element

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

prev() methodFind the previous sibling element

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

siblings() methodFinding sibling elements

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

add() method

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

each() method

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

Related recommendations:

jQuery loads an html page into the specified div

jQuery implements click and mouse sensing events

The solution to the failure of Jquery to bind Click events to newly inserted nodes

The above is the detailed content of jquery dom learning. For more information, please follow other related articles on the PHP Chinese website!