jQuery选择器

博前“废话”

对jQuery有了基本的认识之后，便将继续深入理解jQuery，这个过程开始总是让人兴奋的。但程序员生存法则是：不断地探索新技能，让自己更强大。

jQuery要学些什么？

在我看来，学习jQuery无外乎就是学习如下几个方面:

1. jQuery选择器
2. jQueryDOM操作
3. jQuery事件处理
4. jQuery中的Ajax
   首先学习第一部分jQuery选择器。

什么是jQuery选择器呢？

在以前使用css为html添加样式时，会出现在不同的浏览器上样式的兼容性问题，这从提高html代码质量的那篇博客。jQuery为了解决这系列问题，便继承了CSS的语法，制定了jQuery选择器。jQuery选择器可以对DOM元素的标签名、状态、属性名等进行快速并准确的选择，更不用担心浏览器的兼容性。它也是jQuery最核心的组成部分，在对事件的处理中，遍历Ajax和DOM操作都依赖于选择器。显然，简洁的写法、完善的时间处理机制是jQuery选择器立足的优点，并内置了容错功能，避免像JavaScript那样每次对节点的获取需要进行有效的判断。

jQuery选择器有哪几类？

我们将jQuery选择器大致分为六大类：

1. 基本选择器
2. 进阶选择器
3. 高级选择器
4. 属性选择器
5. 过滤选择器
6. 表单选择器

下面就会这六大jQuery选择器一一进行总结。

jQuery基本选择器

基本选择器是我们最常用的选择器。和css的选择器一样，我们可以通过id、class以及标签来查找DOM元素。

选择器	jQuery模式	CSS模式	描述
标签名(元素)	$(‘div’)	div{}	获取所有div标签的DOM对象
id	$(‘#myId’)	myId{}	获取id为myId的所有DOM对象
(class)类	$(‘.myClass’)	获取class为myClass的所有对象

jQuery进阶选择器

选择器	jQuery模式	CSS模式	描述	jQuery示例
群组选择器	$('strong,p,h1')|strong,p,h1{}|获取多个元素标签的DOM对象|$(‘strong,p,h1’).css(‘color’,’red’)
后代选择器	$('ul li p')|ul li p{}|获取追溯到的多个DOM对象|$(‘ul li p’).css(‘color’,’red’)
通配选择器	$('*')| *{}|获取所有元素标签的DOM对象|$(‘*’).css(‘color’,’red’) 设置所以标签的颜色为红色

jQuery高级选择器

选择器	jQuery模式	CSS模式	描述
子选择器	$(‘div p’)	div > p{}	只获取子类节点的多个DOM对象
next选择器	$(‘div + p’)	div + p{}	只获取某节点后一个同级DOM对象
nextAll选择器	$(‘div ~ p’)	div ~ p{}	只获取某节点后所有同级DOM对象

jQuery属性选择器

jQuery模式	CSS模式	描述
$(‘div[title]’)	div[title]	获取具有这个属性的DOM对象
$(‘div[title=str]’)	div[title=str]	获取这个属性等于这个属性值的DOM对象
$(‘div[title^=str]’)	div[title^=str]	获取属性值以str开头的DOM对象
$('div[title$=str]’)	div[title$=str]	获取属性值以str结尾的DOM对象
$(‘div[title!=str]’)	div[title!=str]	获取属性值不等于str的DOM对象
$(‘div[title*=str]’)	div[title*=str]	获取属性值中含有str的DOM对象
$(‘div[title~=str]’)	div[title~=str]	获取具有这个属性并以一个空格分隔的列表，其中包含属性值的DOM对象

jQuery过滤选择器

过滤选择器是通过特定的过滤规则来筛选出所需的DOM元素，选择器都以’:’开头。其中过滤规则大致分为：基本过滤器，内容过滤器，属性过滤器，可见性过滤器，子元素过滤器以及表单过滤器。

过滤规则之基本过滤器

为了更好的显示效果，这里以标签<li>为例。

过滤器名称	jQuery语法	描述	返回类型
:first	$(‘li:first’)	选取第一个元素	单个元素
:last	$(‘li:last’)	选取最后一个元素	单个元素
:not(selector)	$(‘li:not(.myClass)’)	选取class不是myClass的li元素	元素集合
:even	$(‘li:event’)	选取索引是偶数的所有元素	元素集合
:odd	$(‘li:odd’)	选取索引是奇数数的所有元素	元素集合
:lt(index)	$(‘li:lt(4)’)	选取索引小于index的所有元素	元素集合
:eq(index)	$(‘li:eq(4)’)	选取索引等于index的所有元素	单个元素
:gt(index)	$(‘li:gt(4)’)	选取索引大于index的所有元素	元素集合
:focus	$(‘li:focus’)	选取当前是焦点的元素	元素集合
:animated	$(‘li:animated’)	选取正在执行动画元素	元素集合
:header	$(‘li:header’)	选取标题元素	元素集合

过滤规则之子元素过滤器

过滤器名称	jQuery语法	描述	返回类型
:firstchild	$(‘li:firstchild’)	选取每个父元素的第一个元素	元素集合
:lastchild	$(‘li:lastchild’)	选取每个父元素的最后一个元素	元素集合
:only-child	$(‘li:only-child’)	获取只有一个子元素的元素	元素集合
:nth-child	$(‘li:nth-child’)	获取每个自定义子元素的元素	元素集合

过滤规则之子内容过滤器

过滤器名称	jQuery语法	描述	返回类型
:contains(text)	$(‘:contains(“baidu.com”)’)	选取含有“baidu.com”的元素	元素集合
:empty	$(‘:empty’)	选取不包含子元素或空文本的元素	元素集合
:has(selector)	$(‘:has(.myClass)’)	获取class是myClass的元素	元素集合
:parent	$(‘:parent’)	获取含有子元素或文本的元素	元素集合

jQuery表单选择器

对于表单来说，使用类(class)、标签元素和id来获取表单字段，每个表单元素都必须含有name属性，然后在结合属性选择器来精确定位。
:input 选取所有input、textarea、select 和button 元素 集合元素

选择器	描述	返回类型
:text	选择所有单行文本框，即type=text	元素集合
:password	选择所有密码框，即type=password	元素集合
:radio	选择所有单选框，即type=radio	元素集合
:checkbox	选择所有复选框，即type=checkbox	元素集合
:submit	选取所有提交按钮，即type=submit	元素集合
:reset	选取所有重置按钮，即type=reset	元素集合
:image	选取所有图像按钮，即type=image	元素集合
:button	选取所有普通按钮，即button 元素	元素集合
:file	选取所有文件按钮，即type=file	元素集合
:hidden	选取所有不可见字段，即type=hidden	元素集合
:enabled	选取所有可用元素	元素集合
:disabled	选取所有不可用元	元素集合
:checked	选取所有被选中的元素，单选和复选字段	元素集合
:selected	选取所有被选中的元素，下拉列表	元素集合

总结

以上就是jQuery所以选择器的规则，只有不断的练习才能更好的掌握它。