jQuery层次选择器再探究(原创)

时间:2022-07-31 16:39:34

关于层次选择器的详解:

1)可以选取某一个元素的所有的后代元素,得到一个jQuery对象的集合--->$('prev descendant')

2)可以选取某一个元素的子辈的所有的元素,得到一个jQuery对象的集合--->$('prev>son')

3)可以选取某个元素节点之后的元素,得到一个jQuery对象的集合--->$('prev+next') 或者$('prev').next('  ')

4)可以选取某一个元素对象之后的所有的同胞元素--->$('prev~siblings)或者$('prev').nextAll('  ')

5)可以选取某一个元素对象的所有的同胞元素,不管是在前面的还是在后面的--->$('prev').siblings(' ')

这里最难理解的是第三条,举个例子:

$('prev+next') = $('prev').next('  ')

jQuery层次选择器再探究(原创)

jQuery层次选择器再探究(原创)

alert会出现什么结果呢?

聪明的你一定答对了,没错,是div3,

其实这个选择器要满足两个条件:

1.要在选定的元素之后,

2.要是平级的(即兄弟)第一个元素

按照题目要求也就是id=div1后面第一个平级的div元素,所以只有div3。

我以前理解是第一个div,是不对的。应该是平级的,而且还是第一个,是单个元素,不是一个集合

第四条和第五条也比较容易混淆:

$('prev~siblings) = $('prev').nextAll('  ') 是指指定元素后面的兄弟元素

$('prev').siblings(' ')是指指定元素前后所有的兄弟元素,不包括自己