jquery选择器

一、基本选择器

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")

10、包含text文本

$("ul li:contains(今天早上下雨了~)")   //取ul标签下的文本为"今天早上下雨了~"的li元素。

11、:empty

取不包含子元素或者文本为空的元素。

$("ul li:empty")

12、:has()

取选择器匹配的元素。

$("ul li:has(p)")   //选取ul标签下的含有p标签的li元素。

13、:parent

取包含子元素或者文本的元素。

$("ul li:parent")

14、:hidden

选取不可见的元素。

$("ul li:hidden")

15、:visible

取可见的元素。

$("ul li:visible")

四、属性过滤选择器

1、[attribute]

拥有指定属性的元素,该属性有无值均可。

$("ul li[title]")

2、[attribute=value]

拥有指定属性,并且有指定值的元素。

$("ul li[title='今天早上下雨了~']")

3、[attribute!=value]

指定属性不等于指定值的元素,但是由于如果你没加指定属性,他默认为空,也算上去了。

$("ul li[title='今天早上下雨了~']")

4、[attribute^=value]

拥有指定属性,并且值是由value开头的元素。

$("ul li[title^='今天']")

5、[attribute$=value]

拥有指定属性,并且值是由value结尾的元素。

$("ul li[title$='今天']")

6、[attribute*=value]

拥有指定属性,并且值中包含vlaue的元素。

$("ul li[title$='今天']")

7、多个属性选择器合并使用

选择满足所有条件的。

$("ul li[title$='今天'][class='xixi']")

五、子元素过滤选择器

1、$("ul li:nth-child(3)")

选取ul标签下第三个li元素,这里有点类似":eq",但eq是索引从0开始,nth-child是从1开始

2、$("ul li:nth-child(odd)")

选取ul标签下序号为奇数的li,从1开始数。

3、$("ul li:nth-child(even)")

选取ul标签下序号为偶数的li,从1开始数。

4、$("ul li:nth-child(2n+1)")

这个就是计算得到的元素了,n从0开始。

5、$("ul li:first-child")

选择所有ul元素下的第一个li

6、$("ul li:last-child")

选择所有ul元素下的最后一个li

7、$("ul li:only-child")

选择所有ul元素下的li,并且只能有只能一个li。

六、表单元素选择器

1、$(":input")

选择所有的表单输入元素,包括input, textarea, select 和 button

2、$(":text")

选择所有的type类型为text的input元素。

3、$(":password")

选择所有的type类型为password的input元素。

4、$(":radio")

选择所有的type类型为radio的input元素。

5、$(":checkbox")

选择所有的type类型为checkbox的input元素。

6、$(":submit")

选择所有的type类型为submit的input元素。

7、$(":reset")

选择所有的type类型为reset的input元素。

8、$(":button")

选择所有的type类型为button的input元素。

9、$(":file")

选择所有的type类型为file的input元素。

七、表单过滤选择器

1、$(":enabled")

选择所有的可操作的表单元素。

2、$(":disabled")

选择所有的不可操作的表单元素。

3、$(":checked")

选择所有的被checked的表单元素。

4、$("select option:selected")

选择所有的select元素下的被selected的子元素。

八、父,子,兄弟节点查找方法

1、parent()

返回父节点,可以传入参数过滤。

$(".one").parent();
$(".one").parent(".box");

2、parents()

传入参数返回祖先元素,而不是限于父辈。

3、children()

返回子节点,可以传入参数限制。

4、prev()

返回上一个兄弟节点。

5、next()

返回下一个兄弟节点。

6、prevAll()

返回之前所有的兄弟节点。

7、nextAll()

返回接下来的所有兄弟节点。

8、siblings()

返回所有兄弟节点,不分前后。

9、find()

查找子孙辈节点,而不限于子代。

10、eq()

参数为索引,返回指定索引那一个。

原文地址:https://www.cnblogs.com/xlj-code/p/6295665.html