jQuery选择器

---

一、基本选择器

1、标签选择器

在$()的圆括号内用双引号将标签名括起来即可选中相应的标签。
例如选中元素名称为div的标签选择器：

$("div")

2、id选择器

id前面跟上“#”，以表明这是一个jQuery的id选择器，
例如：

$("#idName")

3、类选择器

class前面跟上"."，以表明这是一个jQuery的类选择器，
例如：

$(".className")

4、使用选择器组合

将选择器使用“,”分隔开，然后拼接成一个选择器字符串，会同时选中这几个选择器匹配的内容。
例如：

$("#divId,a,.bgRed")

5、使用*通配符选择器

“*”通配符选择器表示一次性选中页面上的所有元素，比如可以通过通配符选择器选中所有的元素。
例如：

$("*")

二、层级选择器

1、后代选择器

匹配所有的后代元素，相关的语法规则是祖先与子孙之间使用空格进行分隔。

例如：$(".bgRed div")为选择CSS类为bgRed的元素中的所有<div>元素。

2、父子选择器

匹配当前父元素下的所有子元素，相关语法规则是父元素与子元素之间使用>及进行分隔。

3、相邻选择器

允许选择相邻的元素，它允许匹配指定元素后面的元素，相关的语法规则是中间使用+来连接。

例如：$("#prod1+li")

与相邻元素选择器相似的是next函数，它用来选中当前元素的下一个元素，因此可以使用next函数进行替换。

例如：$("#prod1").next()

4、平级选择器

评级选择器会选择当前元素的平级元素，相关的语法是之间使用~进行连接。

例如：$("#srv2~li")

使用~的平级选择器类似nextAll函数效果。

例如：$("#srv2").nextAll()

如果要选择所有的相邻元素，包含前面和后面的，可以使用siblings函数。

例如：$("#srv2").siblings(“li”)

三、过滤选择器

1、基本过滤选择器

基本过滤选择器规则列表

项目	说明	举例
:first	匹配找到的第一个元素	查找表格的第一行：$(“tr:first”)
:last	匹配找到的最后一个元素	查找表格的最后一行：$(“tr:last”)
:not(selector)	去除所有与给定选择器匹配的元素	查找所有未选中的input元素：$(“input:not(:checked)”)
:odd	匹配所有索引值为奇数的元素，从0开始计数	查找表格的1、3、5等奇数行：$(“tr:odd”)
:even	匹配所有索引值为偶数的元素，从0开始计数	查找表格的2、4、5等偶数行：$(“tr:even”)
:eq(index)	匹配一个给定索引值的元素，index从0开始计数	查找第二行：$(“tr:eq(1)”)
:gt(index)	匹配所有大于给定索引值的元素，index从0开始计数	查找第二、第三行，即索引值是1和2，也就是比0大：$(“tr:gt(0)”)
:lt(index)	选择结果集中索引小于N的elements，index从0开始计数	查找第一、第二行，即索引值是0和1，也就是比2小：$(“tr:lt(2)”)
:header	选择所有h1、h2、h3一类的header标签	给页面内所有标题加上背景色：$(":header").css(“background”,"#EEE");
:animated	匹配所有正在执行动画效果的元素	只有对不在执行动画效果的元素执行一个动画特效：$("#run").click(function(){$(“div:not(:animated)”).animate({left:"+=20"},1000);});

2、内容过滤选择器

内容过滤器规则列表

名称	说明	举例
:contains(text)	匹配包含给定文本的元素	查找所有包含“John”的div元素：$(“div:contains(‘John’)”)
:empty	匹配所有不包含子元素或者文本的空元素	查找所有不包含子元素或者文本的空元素：$(“td:empty”)
:has(selector)	匹配含有选择器所匹配的元素的元素	给所有包含p元素的div元素添加一个text类：$(“div:has§”).addClass(“text”);
:parent	匹配含有子元素或者文本的元素	查找所有含有子元素或者文本的td元素：$(“td:parent”)

3、可见性过滤选择器

可见性过滤选择器根据元素是否可见来查找元素，主要是用hidden查找隐藏的元素和visible查找可见的元素。

可见性选择器规则列表

名称	说明	举例
:hidden	匹配所有不可见元素	查找所有不可见的tr元素：$(“tr:hidden”)
:visible	匹配所有的可见元素	查找所有可见的tr元素：$(“tr:visible”)

:hidden会匹配如下机中格式的元素：

• 具有CSS属性display属性值为none的元素。
• HTML表单元素中的隐藏域，即type="hidden"的元素。
• 宽度和高度被显式设置为0的元素。
• 由于祖先元素为隐藏而导致无法显示在页面上的元素。

：visible是指在屏幕上占用布局空间的元素，可见性元素的宽度和高度大于0时显示。

提示：CSS属性visibility:hidden或者是opacity:0被认为可见，这是由于它们仍然会占用布局空间。如果在动画期间隐藏一个元素，元素会被考虑为可见，直到动画终止，在动画期间显示一个元素，元素在动画开始时被认为可见。

4、属性过滤选择器

属性过滤选择器是jQuery中非常有用的一种选择器，可以基于HTML元素的属性来选择特定的元素，除了根据不同的属性来选择元素，还可以根据不同的属性值来选择元素。

属性过滤选择器规则列表

名称	说明	举例
[attribute]	匹配包含给定属性的元素	查找所有含有id属性的div元素：$(“div[id]”)
[attribute=value]	匹配给定的属性是某个特定值得元素	查找所有name属性是newsletter的input元素：$(“input[name=‘newsletter’]”).attr(“checked”,true);
[attribute!=value]	匹配给定的属性是不包含某个特定值的元素	查找所有name属性不是newsletter的input元素：$(“input[name!=‘newsletter’]”).attr(“checked”,true);
[attribute^=value]	匹配给定的属性是以某些值开始的元素	查找所有name以news开始的input元素：$(“input[name^=‘news’]”)
[attribute$=value]	匹配给定的属性是以某些值结尾的元素	查找所有name以’letter’结尾的input元素：$("input[name$=‘letter’]")
[attribute*=value	匹配给定的属性是包含某些值的元素	查找所有name包含’man’的input元素：$(“input[name*=‘man’]”)
[attributeFilter1][attributeFilter2][attributeFilter3]	复合属性选择器，需要同时满足多个条件时使用	找到所有含有id属性并且它的name属性是以man结尾的元素：$("input[id][name$=‘man’]")

5、子元素过滤选择器

这个过滤器是指根据父元素中的某些过滤规则来选择子元素，例如可以选择父元素的第1个子元素（:first-child）或者最后1个子元素（:last-child），或者是父元素中特定位置的子元素。

子元素过滤器规则列表

名称	说明	举例
:nth-child(index/even/odd/equation)	匹配其父元素下的第N个子元素或奇偶元素’:eq(index)'只匹配一个元素，将为每一个父元素匹配子元素：nth-child是从1开始的，而:eq()是从0算起的，可以使用以下几项：:nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)	在每个ul中查找第2个li：$(“ul li:nth-child(2)”)
:first-child	匹配第一个子元素，’:first’只匹配一个元素，为每个父元素匹配一个子元素	在每个ul中查找第一个li：$(“ul li:first-child”)
:last-child	匹配最后一个子元素，’:last’只匹配一个元素，为每个父元素匹配一个子元素	在每个ul中查找最后一个li：$(“ul li:last-child”)
:only-child	如果某个元素是父元素中唯一的子元素，就将会被匹配；如果父元素中含有其他元素，就不会被匹配	在ul中查找是唯一子元素的li：$(“ul li:only-child”)

6、表单对象属性过滤器

种种类型的过滤器可以根据表单中某对象的属性特征来获取表单元素，比如表单元素的enabled、disabled、selected以及checked属性。

表单对象属性过滤规则列表

名称	说明	举例
:enabled	匹配所有可用元素	查找所有可用的input元素：$(“input:enabled”)
:disabled	匹配所有不可用元素	查找所有不可用的input元素：$(“input:disabled”)
:checked	匹配所有被选中元素（复选框、单选按钮等，不包括select中的option）	查找所有选中的复选框、单选按钮元素：$(“input:checked”)
:selected	匹配所有选中的option元素	查找所有选中的选项元素：$(“select option:selected”)

使用表单对象属性过滤器，可以对表单中的控件元素的可用（enabled）、不可用（disabled），Checkbox控件的选择（checked）与select控件的选中（selected）这些属性进行选择，这样使得在开发表单时可以快速地选中所需要的控件。

四、表单选择器

表单选择器提供了灵活的方法来选择表单中的元素。

表单选择器规则列表

名称	说明	解释
:input	匹配所有input、textarea、select和button元素	查找所有的input元素：$(":input")
:text	匹配所有的文本框	查找所有文本框：$(":text")
:password	匹配所有密码框	查找所有密码框：$(":password")
:radio	匹配所有单选按钮	查找所有单选按钮：$(":radio")
:checkbox	匹配所有复选框	查找所有复选框：$(":checkbox")
:submit	匹配所有提交按钮	查找所有提交按钮：$(":submit")
:image	匹配所有图像域	匹配所有图像域：$(":image")
:reset	匹配所有重置按钮	查找所有重置按钮：$(":reset")
:button	匹配所有按钮	查找所有按钮：$(":button")
:file	匹配所有文件域	查找所有文件域：$(":file")

五、常见问题

1、$(“input”)和$(":input")两个选择器的区别

• $(“input”)是标签选择器，选择页面中所有的input元素。
• $(":input")是表单选择器，选择表单中的input、select、textarea、button元素。

2、子选择器和后代选择器的区别

在$(“div1>p”)和$("#div1 p")中两者的区别为：

• 前者表示查找到id为div1元素中的子标签为p的元素。
• 后者表示查找id为div1中所有标签为p后代的元素，即子元素、孙子元素、曾孙元素等都可以。