Question

1．CSS选择器

在开始学习jQuery选择器之前，有必要简单了解前几年流行起来的CSS（Cascading Style Sheets，层叠样式表）技术。CSS是一项出色的技术，它使得网页的结构和表现样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构，只需通过添加不同的CSS规则，就可以得到各种不同样式的网页。

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

表2-1　常用的CSS选择器

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

更加详细的介绍可以参考http://www.w3.org/TR/CSS2/selector.html网址。

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

上面代码的意思是将<p>元素里的文本颜色设置为红色，字体大小设置为30px。

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

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

例如要使所有class为demo的<p>元素里的字体加粗，可以直接在<style>里编写，而不需要去网页里寻找所有class为demo的<p>元素再逐个添加样式，代码如下：

注：把CSS应用到网页中有3种方式，即行间样式表、内部样式表和外部样式表。上例中使用的是内部样式表，内部样式表的缺点是不能被多个页面重复使用。

2．jQuery选择器

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

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

本段代码的作用是为<p>元素设置一个onclick事件，当单击此元素时，会弹出一个对话框，显示效果如图2-1所示。

图2-1　弹出警告框

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

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

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

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

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