2.0 第2章 jQuery选择器 2.1 jQuery选择器是什么

发表于 更新于 分类于 ， Waline： 本文字数： 2.5k 阅读时长 ≈ 2 分钟

第2章 jQuery选择器

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

2.1 jQuery选择器是什么

1．CSS选择器

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

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

表2-1 常用的CSS选择器

epub_731606_43

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

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

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

1
<p style="color:red；font-size:30px；">CSS Demo</p>

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

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

1
2
3
4
5
6
7
8
<style>
    /*给class为demo的元素添加样式*/
    .demo {
        color: red;
        font-size: 30px;
    }
</style>
<p class="demo">CSS Demo.</p>

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

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

1
2
3
4
5
6
7
8
9
10
<style>
    /*给class为demo的元素添加样式*/
    .demo {
        color: red;
        font-size: 30px;
        /*字体加粗*/
        font-weight: bold;
    }
</style>
<p class="demo">CSS Demo.</p>
注：把CSS应用到网页中有3种方式，即行间样式表、内部样式表和外部样式表。上例中使用的是内部样式表，内部样式表的缺点是不能被多个页面重复使用。

2．jQuery选择器

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

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

1
2
3
4
5
6
<script type="text/javascript">
    function demo() {
        alert('JavaScript demo.');
    }
</script>
<p onclick="demo();">点击我.</p>

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

image-20211214210228808

图2-1 弹出警告框

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

1
2
3
4
5
6
7
<p class="demo">jQuery Demo</p>
<script type="text/javascript">
    //给class为demo的元素添加行为
    $(".demo").click(function () {
        alert("jQuery demo!");
    })
</script>

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

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

1
2
3
4
/*给class为demo的元素添加样式*/
.demo {
    ...
}

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

1
2
3
4
//给class为demo的元素添加行为
$(".demo").click(function(){
    ...
}

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