jQuery选择器

选择器

1、基本选择器？

2、层次选择器？

3、过滤选择器？

4、表单选择器？

1）基本选择器

选择器              描述                                                                     返回

#id            根据ID匹配的一个元素                                                 单个元素

.class         根据给定的类名匹配元素                                              集合元素

element    根据给定的标签名匹配元素                                           集合元素

*               匹配所有元素                                                                集合元素

select1,select2,select3....selectN 将每个选择器匹配到的元素合并后一起返回                    集合元素

2）层次选择器

示例                            描述                                                                           返回

$("div span")              选取<div>里面所有的<span>元素                             集合元素

$("div > span")           选取<div>里面下元素名是<span>的子元素               集合元素

$(".one + div")            选取类名为one的下一个<div>同辈元素                      集合元素

$(".two ~ div")            选取类名为two的元素后面所有的同辈<div>元素         集合元素

后面2个选择器比较少用，常用的是下面的2个方法

$(".one + div")  <==>  $(".one").next("div")     这2个是等价的

$(".one ~ div")  <==>  $(".one").nextALL("div")  这2个是等价的 

$(".one").siblings("div")                        选取类名所有的同辈div元素，无论前后位置

3)过滤选择器

过滤选择器以冒号(:)开头，按照不同的过滤规则，过滤器可以分为基本过滤，内容过滤，可见性过滤，属性过滤等等

选择器              描述                                               示例

:first              选取第1个元素                                      $("div:first") 选取所有<div>元素中第一个<div>元素

:last               选取最后一个元素                                   $("div:last")  选取所有<div>元素中最后一个<div>元素

:not(selector)      去除所有与给定选择器匹配的元素                     $("input:not(.myclass)")  选取类名不是myclass的input元素

:even               选取索引是偶数的所有元素，索引从0开始              $("tr:even")    选取索引是偶数的行

:odd                选取索引是奇数的所有元素，索引从0开始              $("tr:odd")     选取索引是奇数的行

:eq(index)          选取索引等于index的元素                            $("tr:eq(1)")   选取索引等于1的行

:gt(index)          选取索引大于index的元素                            $("tr:gt(1)")   选取索引大于1的行

:lt(index)          选取索引小于index的元素                            $("tr:lt(1)")   选取索引小于1的行

:header             选取所有的标题元素                                 $(":header")    选取网页中所有的<h1><h2><h3>....

:animated           选取当前正在执行动画的所有元素                     $("div:animated") 选取正在执行动画的div元素

:focus              选取当前获取焦点的元素                             $(":focus")

内容过滤选择器:

:contains(text)     选取含有文本内容为text的元素                       $("div:contains('我')")  选取含有文本“我”的<div>元素

:empty              选取不包含子元素或者文本的元素                     $("div:empty")           选取不包含子元素的<div>空元素

:has(selector)      选取含有选取器所匹配的元素的元素                   $("div:has(p)")          选取含有<p>元素的<div>元素

:parent             选取含有子元素或者文本的元素                       $("div:parent")          选取拥有子元素的<div>元素

过滤选择器:

:hidden             选择所有不可见的元素                               比如<div style="display:none"> <input type="hidden">

:visible            选择所有可见元素                                         

对象属性过滤器，主要对所选择的表单元素进行过滤，例如被选择的下拉框，多选框等:

:enabled           选取所有可用元素                                    $("#form1:enabled")

:disabled          选取所有不可用元素                                  $("form1:disabled")

:checked           选取所有被选中的元素(单选框，复选框)                $("input:checked")

:selected          选取所有被选中的选项元素(下拉列表)                  $("select option:selected")

表单选择器

:input                选取所有的<input><textarea><select><button>元素      

:text                  选取所有的单行文本框

:password         选取所有的密码框

:radio                选取所有的单选框

:checkbox         选取所有的多选框

:submit             选取所有的提交按钮

:image              选取所有的图像按钮

:reset                选取所有的重置按钮

:button            选取所有的按钮

:file                  选取所有的上传域

:hidden           选取所有的不可见元素

子元素过滤选择器:

:nth-child(index/even/odd/equation)          选取每个父元素下的第index个子元素或者奇偶元素，index从1开始算

:first-child                                 选取每个父元素的第1个子元素

:last-child                                  选取每个父元素的最后一个子元素

:only-child                                 如果某个元素是他父元素中唯一的子元素，那么将会被匹配

(1):nth-child(even)                    选取每个父元素下的索引值是偶数的元素

(2):nth-child(odd)                     选取每个父元素下的索引值是奇数的元素

(3):nth-child(2)                         选取每个父元素下的索引值等于2的元素

(4):nth-child(3n)                       选取每个父元素下的索引值是3的倍数的元素(n从1开始)

(5):nth-child(3n+1)                   选取每个父元素下的索引值是3n+1的元素

本文出自 “leboit” 博客，谢绝转载！