JQuery选择器的学习和CSS选择器几乎是一样的，那我们首先来了解一下JQuery基本选择器

1. 基本选择器

element: 标签选择器，获取页面上同一类标签

.class 类选择器，获取页面上class属性值相同的一类标签

#id id选择器，获取页面上指定id属性对应的值的唯一标签

selector1,selector2,selectorN 并集选择器，选做多种类型的选择器的组合

* 通用选择器: 选择页面上所有的标签

代码示例如下所示:

静夜思

李白

床前明月光

疑似地上霜

举头望明月

低头思故乡

2. 层级选择器

ancestor descendant 后代选择器: 选择祖先ancestor下的所有后代descendant标签

parent > child 子代选择器: 选择父亲parent下面所有的一级子标签

prev + next 相邻兄弟选择器: 选择紧邻某一个元素的下一个元素标签

prev ~ siblings 通用兄弟选择器: 获取某个元素同级别后面的所有元素

代码示例如下所示:

春晓

孟浩然

• 春眠不觉晓
• 处处闻啼鸟
• 夜来风雨声
• 花落知多少

我是div1

我是div2

我是div3

3. 基本筛选器

:first: 获取第一个元素

:last: 获取最后一个元素

:eq(index) 获取第几个元素,index 从0开始

:gt(index) 获取满足大于指定索引值的所有元素,index 从0开始

:lt(index) 获取满足小于指定索引值的所有元素,index 从0开始

:even 获取所有索引值为偶数的元素，从 0 开始计数

:odd 获取所有索引值为奇数的元素，从 0 开始计数

:not(selector): 选取除了 指定选择器元素以外的所有元素：

:header: 选取所有标题元素 (h1 - h6)：

:focus 选取当前获取焦点的元素

代码示例如下所示:

九月九日忆山东兄弟

唐代：王维

• 独在异乡为异客
• 每逢佳节倍思亲
• 遥知兄弟登高处
• 遍插茱萸少一人

用户名:

密码:

4. 内容选择器

:empty 获取既没有文本也没有子元素的指定元素

:parent 获取有文本内容或有子元素的指定元素

:contains(text): 获取包含指定文本内容的指定元素

:has(selector): 获取包含指定子元素的指定元素

代码示例如下所示:

我是div

他也是div

5. 可见性选择器

:hidden 匹配所有不可见元素，或者type为hidden的元素

:visible 匹配所有的可见元素

代码示例如下所示:

span

p

6. 属性选择器

[attribute] 获取具有属性attr的元素

[attribute=value] 获取属性attr等于val的元素

[attribute!=value] 获取属性attr不等于val的元素

[attribute^=value] 获取属性attr以val开头的元素

[attribute$=value] 获取属性attr以val结尾的元素

[attribute*=value] 获取属性attr包含val的元素

[attrSel1][attrSel2][attrSelN] 获取包含多个属性选择器的元素

代码示例如下所示:

1

2

3

4

5

6

7

8

9

10

7. 结构伪类选择器

:first-child 获取第一个子元素,不区分元素类型

:first-of-type1.9+ 获取第一个子元素,区分元素类型

:last-child 获取最后一个子元素,不区分元素类型

:last-of-type1.9+ 获取第一个子元素,区分元素类型

:nth-child 获取第n个子元素,不区分元素类型

:nth-last-child()1.9+ 获取倒数第n个子元素,不区分类型

:nth-of-type()1.9+ 获取第n个子元素,区分元素类型

:nth-last-of-type()1.9+ 获取倒数第n个子元素,区分元素类型

:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配,如果父元素中含有其他元素，那将不会被匹配,不区分类型

:only-of-type1.9+ 如果某个元素是父元素中唯一的子元素，那将会被匹配,如果父元素中含有其他元素，那将不会被匹配,区分类型

代码示例如下所示:

子元素选择器

p1

p2

p3

• li1
• li2
• li3
• li4
• li5

• only

8. 表单选择器/表单对象属性选择器

表单对象选择器

:input 获取所有的表单元素

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

:password 获取所有密码框

:radio 获取所有单选按钮

:checkbox 获取所有的复选按钮

:submit 获取所有的提交按钮

:image 获取所有的图像域

:reset 获取所有的重置按钮

:button 获取所有的普通按钮

:file 获取所有的文件表单元素

:hidden 获取所有的隐藏域表单元素

表单对象属性选择器

:enabled 获取所有可用的表单元素

:disabled 获取所有不可用的表单元素

:checked 获取选中的的表单元素(复选框、单选框等，不包括select中的option)

:selected 获取所有选中的option元素

代码示例如下所示:

注册表单

用户名:

密   码:

年龄:

男

女

CS

DNF

LOL

CF

星座

===请选择===

狮子座

双子座

射手座

双鱼座

照片:

普通按钮

提交按钮

重置按钮