什么是jQuery选择器

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

1．CSS选择器

在开始学习jQuery选择器之前，有必要简单了解前几年流行起来的CSS（Cascading StyleSheets，层叠样式表）技术。

CSS是一项出色的技术，它使得网页的结构和表现样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构，只需通过添加不同的CSS规则，就可以得到各种不同样式的网页。

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

选择器	语法	描述
标签选择器	E {
CSS规则
}
以文档元素作为选择符	td {
font-size:14px;
width:120px;
}
a {
text-decoration:none;
}
ID选择器	#ID {
CSS规则
}	以文档元素的惟一标识符ID作为选择符	#note {
font-size:14px;
width:120px;
}

类选择器	E.classNamw {
CSS规则
}	以文档元素的class作为选择符	div.note {
font-size:14px;
}
群组选择器	E1,E2,E3 {
CSS规则
}	多个选择符应用同样的样式规则	td,p,div,a {
font-size:14px;
}
后代选择器	E,F {
CSS规则
}	元素E的任意后代元素F	#links a {
color:red;
}
通配选择器	* {
CSS规则
}	以文档的所有元素作为选择符	* {
font-size:14px;
}

几乎所有主流浏览器都支持上面这些常用的选择器。此外CSS中还有伪类选择器(E:Pseudo-Elements{ CssRules })、子选择器(E > F{ CssRules })、临近选择器(E + F{ CssRules })和属性选择器（E [attr] { CssRules }）等。但遗憾的是，主流浏览器并非完全支持所有的CSS选择器。

了解这些相关知识后，来看一个有关CSS类选择器的简单例子，代码如下：

CSS Demo

上面代码的意思是将

元素里的文本颜色设置为红色，字体大小设置为30px。

像上面这样把CSS代码和HTML代码混杂在一起的做法是非常不妥的，它并不符合表现和内容相分离的设计原则，因此建议使用下面的方法，代码如下：

.demo{ //给class为demo的元素添加样式 color:red; font-size:30px; }

CSS Demp.

先把样式写在标签里，然后用class属性将元素和样式联系起来，class作为连接样式和网页结构的纽带。这样的写法不仅容易理解和阅读，而且当需要改变一些样式的时候，只要在标签里改变相关的样式即可。

例如要使所有class为demo的

元素里的字体加粗，可以直接在里编写，而不需要去网页里寻找所有class为demo的元素再逐个添加样式，代码如下： .demo{ //给class为demo的元素添加样式 color:red; font-size:30px; font-weight:bold; //字体加粗 }

CSS Demp.

2．jQuery选择器

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

下面来看一个简单的例子，代码如下：

onclick="demo();">点击我.

本段代码的作用是为

元素设置一个onclick事件，当单击此元素时，会弹出一个对话框，显示“JavaScript Demo”。

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

jQuery Demo

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

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

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

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

$(".demo"{ //给class为demo添加行为
……

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