jquery选择器

Posted 2020-08-28 asimpleday

一、基本选择器

1、id选择器

选择id值等于指定id元素，id值在文档中只能有一个，不能重复，所以得到的是唯一的元素。

$("#one")

 

2、class选择器

选择类名为指定class的所有元素。

$(".one")

 

3、element选择器

根据标签名获得元素集合。

$("p")

 

4、通配符选择器

选择文档中的所有元素。

$("*")

 

5、并列选择器

多种的选择方法联合使用，中间用逗号隔开。

$("#one,.one,p")

 

二、层次选择器

1、直系子元素

父元素下的指定子元素。

$("div>p")

 

2、prev+next

下一个兄弟元素。

$("li+li")    //选择li元素的下一个li元素，所以剔除了第一个。

 

3、prev~siblings

指定元素接下来的所有指定兄弟元素。

$(".one~div")     //选择class为one的元素之后的div兄弟元素

 

4、后代选择器

指定元素的指定后代集合。

$(".one div")        //class为one的所有div后代

 

三、基本过滤选择器

1、指定元素集合的第一个

$("ul li:first")       //获得ul标签下的第一个li元素

 

2、1、指定元素集合的最后一个

$("ul li:last")      //获得ul标签下的最后一个li元素

 

3、取非元素

过滤掉

$("ul li:not(.one)")   //获得ul标签下的li元素，但是不包含类名为one的。

 

4、偶数索引

索引从0开始，取为偶数的。

$("ul li:even")

 

5、奇数索引

索引从0开始，取为奇数的。

$("ul li:odd")

 

6、指定索引

元素集合下的指定位置的那一个。

$("ul li:eq(2)")     //取ul标签下的第三个li元素。

 

7、大于指定索引

$("ul li:gt(2)")    //取ul标签下索引大于2的li元素。

 

8、小于指定索引

$("ul li:lt(2)")    //取ul标签下索引小于2的li元素。

 

9、标题选择器

取h1~h6的标题元素。

$(":header")