jQuery DOM节点的遍历方法小结(2)

遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,直到找到一个匹配的就停止查找,parents一直查找到根元素,并将匹配的元素加入集合

结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象

next()方法

jQuery是一个合集对象,如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合,此时可以用next()方法

节点查找关系

//如下的class="item-2"就是class="item-1"的兄弟元素 <ul> <li>1</li> <li>2</li> <li>3</li> </ul>

next()无参数

允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素,并根据匹配的元素创建一个新的 jQuery 对象。

注意:jQuery是一个合集对象,所以通过next匹配合集中每一个元素的下一个兄弟元素

next()方法选择性地接受同一类型选择器表达式

同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式

prev()方法

jQuery是一个合集对象,如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合,此时可以用prev()方法

节点查找关系

如下的class="item-1"节点就是class="item-2"的li元素的prev兄弟节点

<ul> <li>1</li> <li>2</li> <li>3</li> </ul>

prev()无参数

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

注意:jQuery是一个合集对象,所以通过prev是匹配合集中每一个元素的上一个兄弟元素
prev()方法选择性地接受同一类型选择器表达式

同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式

siblings()

jQuery是一个合集对象,如果想快速查找指定元素集合中每一个元素的同辈元素,此时可以用siblings()方法

节点查找关系
如下是class="item-1"和class="item-3"就是class="item-2"的siblings兄弟节点

<ul> <li>1</li> <li>2</li> <li>3</li> </ul>

siblings()无参数

取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合

注意:jQuery是一个合集对象,所以通过siblings是匹配合集中每一个元素的同辈元素
siblings()方法选择性地接受同一类型选择器表达式

同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式

add()方法

jQuery是一个合集对象,通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的,如果后期需要再往这个合集中添加一新的元素要如何处理?jQuery为此提供add方法,用来创建一个新的jQuery对象 ,元素添加到匹配的元素集合中

.add()的参数可以几乎接受任何的$(),包括一个jQuery选择器表达式,DOM元素,或HTML片段引用

//操作:选择所有的li元素,之后把p元素也加入到li的合集中 <ul> <li>list item 1</li> <li>list item 3</li> </ul> <p>新的p元素</p> // 处理一:传递选择器 $('li').add('p') // 处理二:传递dom元素 $('li').add(document.getElementsByTagName('p')[0]) // 动态创建P标签加入到合集,然后插入到指定的位置,但是这样就改变元素的本身的排列了 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

each()

jQuery是一个合集对象,通过$()方法找到指定的元素合集后可以进行一系列的操作

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyddgj.html