选择器是jQuery的根基，在jQuery中，对事件的处理、遍历DOM和Ajax操作都依赖于选择器，如果能熟练地使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。

jQuery选择器是什么CSS选择器

在开始jQuery选择器之前，有必要简单回顾下CSS技术，CSS使得网页的结构和表现样式完全分离，利用CSS选择器能够轻松地对某个元素添加样式而不改动HTML结构，只需通过添加不同的CSS规则就可以得到各种不同样式的网页。

要使某个样式应用于特定的HTML元素，首先需要找到该元素，在CSS中，执行这一任务的表现规则称为CSS选择器，学会使用CSS选择器是学习CSS的基础，它为在获取目标元素之后施加样式提供了极大的灵活性。

常用CSS选择器

几乎所有主流浏览器都支持上面这些常用的选择器，此外CSS中还有伪类选择器、子选择器、临近选择器和属性选择器等，但遗憾的是，主流浏览器并非完全支持所有的CSS选择器。

jQuery选择器

jQuery中的选择器完全继承了CSS的风格，利用jQuery选择器可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器，学会使用选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素后才能生效。

下面看一个简单的例子：

<script type=”text/javascript”>	function demo(){	alert(“javaScript demo”);}</script><p onclick=”demo()”>点击我</p>

像上面这样把javaScript代码和HTML代码混合在一起的做法非常不妥，因为它并没有将网页内容和行为分离，所以建议使用下面的方法：

<p class=”demo”>jQuery Demo</p><script type=”text/javascript”>  $(“.demo”).click(function(){	  alert(“jQuery Demo”);  });	</script>

此时，可以对CSS的写法和jQuery的写法进行比较。

CSS获取到元素的代码如下：

.demo{			//给class为demo的元素添加样式	…}

jQuery获取到元素的代码如下：

$(“.demo”).click(function(){	//给class为demo的元素添加行为	…});

jQuery选择器的写法与CSS选择器的写法十分相似，只不过两者作用效果不同，CSS选择器找到元素后是添加样式，而jQuery选择器找到元素后是添加行为，需要特别说明的，jQuery中涉及操作CSS样式的部分比单纯的CSS功能更为强大，并且拥有跨浏览器的兼容性。

jQuery选择器的优势简洁的写法

$(“#ID”)用来代替document.getElementById(“ID”)，即通过ID获取元素；$(“div”)用来代替document.getElementsByTagName(“div”)，即通过标签名获取HTML元素。

支持CSS1到CSS3

jQuery选择器支持CSS1、CSS2的全部和CSS3的部分选择器，同时它也有少量独特的选择器，因此对拥有一定CSS基础的开发人员来说，学习jQuery选择器是件非常容易的事，使用CSS选择器时，开发人员需要考虑主流浏览器是否支持某些选择器，而在jQuery中，开发人员则可以放心地使用jQuery选择器而无需考虑浏览器是否支持这些选择器。

完善的处理机制

使用jQuery选择器不仅比使用传统的getElementById()和getElmentsByTagName()函数简洁得多，而且还能避免某些错误，如对页面上没有的元素进行js操作。

jQuery选择器基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class、和标签名等来查找DOM元素，在网页中，每个id名称只能使用一次，class允许重复使用，基本选择器介绍如下：

基本选择器

层次选择器

如果想通过DOM元素之间的层次关系来获取特定的元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择：

层次选择器

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号开头，按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

基本过滤选择器

基本过滤选择器

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

内容过滤选择器

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

可见性过滤选择器

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

属性过滤选择器

子元素过滤选择器

子元素过滤选择器的过滤规则相对于其他的选择器稍微复杂，不过没关系，只要将元素的父元素和子元素区分清楚，那么使用起来也非常简单。

子元素过滤选择器

:nth-child详细功能如下：

:nth-child(even)能选取每个父元素下的索引值是偶数的元素:nth-child(odd)能选取每个父元素下的索引值是奇数的元素:nth-child(2)能选取每个父元素索下的索引值等于2的元素:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素（n>=1）:nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素（n>=1）

表单对象属性过滤选择器

此选择器主要是对所选择的表单元素进行过滤。

表单对象属性过滤选择器

表单选择器

为了是用户能够更加灵活的操作表单，jQuery中专门引入了表单选择器，利用这个选择器能极其方便地获取到表单的某个或某类型的元素。

表单选择器

若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！

关注并转发后私信“jQuery基础材料”获取线下资料，包括完整基础资料、chm文档、示例代码及其他参考资料。

下一章：jQuery基础回顾——jQuery中的DOM操作