从0到1 jQuery快速上手

从0到1：jQuery快速上手

莫振杰　著

人民邮电出版社

北京

图书在版编目（CIP）数据

从0到1：jQuery快速上手/莫振杰著.--北京：人民邮电出版社，2020.4

ISBN　978-7-115-52633-5

Ⅰ.①从…　Ⅱ.①莫…　Ⅲ.①JAVA语言—程序设计　Ⅳ.①TP312.8

中国版本图书馆CIP数据核字（2019）第268928号

定价：49.80元

读者服务热线：(010)81055410　印装质量热线：(010)81055316

反盗版热线：(010)81055315

广告经营许可证：京东工商广登字20170147号

内容提要

作者根据自己多年的前后端开发经验，站在完全零基础读者的角度，基于jQuery 1.12.x版本，详尽介绍了jQuery的基础知识及开发技巧。

全书分为14章，前10章主要介绍jQuery的基本技术，包括常用选择器、DOM操作、事件操作、jQuery动画、过滤方法、查找方法等；后4章主要介绍jQuery的进阶技巧，包括工具函数、开发插件、Ajax操作以及高级技巧。

此外，本书不但配备了所有案例的源代码，作者还结合实际工作和前端面试的经验，精选了很多高质量的练习题。为了方便高校老师教学，本书还提供了配套的PPT课件。本书适合作为前端开发人员的参考书，也可以作为大中专院校相关专业的教学参考书。

前言

一本好书不仅可以让读者学得轻松，更重要的是可以让读者少走弯路。如果你需要的不是大而全，而是恰到好处的前端开发教程，那么不妨试着看一下这本书。

本书和“从0到1”系列中的其他图书，大多是源于我在绿叶学习网分享的超人气在线教程。由于教程的风格独一无二、质量很高，因而累计获得超过100000读者的支持。更可喜的是，我收到过几百封的感谢邮件，大多来自初学者、已经工作的前端工程师，还有不少高校老师。

我从开始接触前端开发时，就在记录作为初学者所遇到的各种问题。因此，我非常了解初学者的心态和困惑，也非常清楚初学者应该怎样才能快速而无阻碍地学会前端开发。我用心总结了自己多年的学习和前端开发经验，完全站在初学者的角度而不是已经学会的人的角度来编写本书。我相信，本书会非常适合零基础的读者轻松地、循序渐进地展开学习。

之前，我问过很多小伙伴，看“从0到1”这个系列图书时是什么感觉。有人回答说：“初恋般的感觉。”或许，本书不一定十全十美，但是肯定会让你有初恋般的怦然心动。

配套习题

每章后面都有习题，这是我和一些有经验的前端工程师精心挑选、设计的，有些来自实际的前端开发工作和面试题。希望小伙伴们能认真完成每章练习，及时演练、巩固所学知识点。习题答案放于本书的配套资源中，具体下载方式见下文。

配套网站

绿叶学习网（www.lvyestudy.com）是我开发的一个开源技术网站，该网站不仅可以为大家提供丰富的学习资源，还为大家提供了一个高质量的学习交流平台，上面有非常多的技术“大牛”。小伙伴们有任何技术问题都可以在网站上讨论、交流，也可以加QQ群讨论交流：519225291、593173594（只能加一个QQ群）。

配套资源下载及使用说明

本书的配套资源包括习题答案、源码文件、配套PPT教学课件。扫描下方二维码，关注微信公众号“职场研究社”，并回复“52633”，即可获得资源下载方式。

特别鸣谢

本书的编写得到了很多人的帮助。首先要感谢人民邮电出版社的赵轩编辑和罗芬编辑，有他们的帮助本书才得以顺利出版。

感谢五叶草团队的一路陪伴，感谢韦雪芳、陈志东、秦佳、程紫梦、莫振浩，他们花费了大量时间对本书进行细致的审阅，并给出了诸多非常棒的建议。

最后要感谢我的挚友郭玉萍，她为“从0到1”系列图书提供了很多帮助。在人生的很多事情上，她也一直在鼓励和支持着我。认识这个朋友，也是我这几年中特别幸运的事。

由于水平有限，书中难免存在不足之处。小伙伴们如果遇到问题或有任何意见和建议，可以发送电子邮件至lvyestudy@foxmail.com，与我交流。此外，也可以访问绿叶学习网（www.lvyestudy.com），了解更多前端开发的相关知识。

作者

第1章　jQuery

1.1　jQuery简介

在学习jQuery之前，我们先来给小伙伴们介绍一下jQuery开发的基础知识。了解这些，对后续学习是非常重要的，同时也能让你少走很多弯路。

1.1.1　从“JavaScript”到“JavaScript库”

“jQuery、Prototype、Mootools、YUI、Dojo、Ext.js……”

在平常的学习中，我们或多或少都听过以上这些名词。其实，这些都来自JavaScript库。那么问题就来了：“JavaScript库又是什么呢？本来已经有JavaScript了，为什么还会出现这玩意儿？”

我们都知道，JavaScript是一门很烦琐的编程语言，不仅语法复杂，还会出现各种兼容问题。举个简单的例子，如果我们使用JavaScript来实现动画效果（如滑动、过渡等），那么代码量会非常大，而且还得对各个浏览器作兼容处理。因此，为了减少工作量，我们常常会把JavaScript中经常用到的一些功能或特效封装成一个“代码库”，这样在实际开发中只需要调用一些简单的函数就能直接使用这些功能或特效了。

对于“JavaScript”和“JavaScript库”的关系，可以这样去理解。如果经常用到某一个特效，我们可以把这个特效封装成一个函数。这样以后需要用到这个特效时，我们只需要调用这个函数就可以了。我们把常用的功能或特效都像上面那样封装成一个个函数，这些函数放在一起就成了一个“JavaScript库”。也就是说：jQuery、Prototype、Mootools等，本身都是用JavaScript来写的。（这句话应该很好理解。）

打个比方，我们把“JavaScript”看成是“原料”，则“JavaScript库”可以看成是用原料做成的“半成品”，而程序用到的功能或特效就是“成品”。如果想要得到一件成品，你可以直接用原料做，也可以用半成品做。不过用原料来做，工序肯定更多，时间也更长。而使用半成品来做，则可以省去很多工序，时间也会缩短很多。

实际上，我们即将学到的jQuery就是众多JavaScript库中非常好用的半成品，也是用得非常频繁的半成品。

1.1.2　关于jQuery

jQuery，也就是JavaScript和查询（Query）的组合，即辅助JavaScript开发的一个库。jQuery是全球十分流行的JavaScript库。在世界访问量前10000的网站中，超过55%的网站在使用jQuery。

从前文我们可以知道，jQuery本身就是用JavaScript来写的，它只是把JavaScript中最常用的功能封装起来，以方便开发者快速开发。遥想当年，jQuery的创始人John Resig就是受够了JavaScript的各种缺点，所以才开发了jQuery。

jQuery具有很多优点，主要包括以下几点。

·代码简洁。

·完美兼容。

·轻量级。

·强大的选择器。

·完善的Ajax。

·丰富的插件。

“简洁与高效”是jQuery最大的特点。有一句话说得好：“每多学一点知识，就少写一行代码。”实际上jQuery的理念亦是如此：“Write less,do more.”

【解惑】

1.在三大框架（Vue、React、Angular）非常流行的今天，学习jQuery还有用吗？

jQuery依然被用得很多，现在互联网公司的项目并不都是使用Vue或React等来开发的，还有相当一部分项目是采用传统方式来开发，而传统方式大多数情况下都会用到jQuery。

在前端面试中，jQuery依然是必备的一项技能。如果只学Vue或React，实际上还是满足不了真正的前端开发工作。所以小伙伴们还是有必要认真地学一下jQuery。

2.对于jQuery的学习，除了这本书，还有什么推荐的吗？

给小伙伴们一个很有用的建议：在学习任何编程语言的过程中，一定要养成查阅官方文档的习惯，因为这是重要的参考资料，并且还能提高自己的英文水平。其中，jQuery官方文档地址如下。

·jQuery API文档：http://api.jquery.com。

·jQuery UI文档：http://jqueryui.com/demos。

·jQuery Mobile文档：http://jquerymobile.com/demos。

·jQuery插件：https://plugins.jquery.com。

1.2　教程介绍

在学习jQuery之前，你必须要有HTML、CSS和JavaScript的基础才行。这里有一个现象要和大家说一下：很多小伙伴没有一点JavaScript基础，就跑去学习jQuery。根据个人经验，我并不太赞成这种做法。因为jQuery本身就是用JavaScript来写的，它只是把JavaScript常用功能封装起来而已。jQuery的很多语法其实与JavaScript的语法是相似或者是共通的。相信不少跳过JavaScript去学习jQuery的小伙伴都有过这样一段痛苦经历：看不懂jQuery的语法，又不得不跑回去翻JavaScript，浪费了大量的时间，还把学习兴趣给磨灭了。

那么问题又来了：“是不是要把JavaScript精通了，再去学jQuery比较好呢？”这倒完全没必要，我们只需要掌握JavaScript基础就可以开始学习jQuery了。那怎样才算掌握了JavaScript基础呢？很简单，因为“从0到1”整个系列图书在编写的时候已经考虑到这一点了。本书是另一本书《从0到1：JavaScript快速上手》的进阶篇，小伙伴们可以先把那本书认真学习完，再来学习本书内容。

本系列图书中的每一句话，我都精心编写，反复审阅，尽量把精华呈现给大家。所以大家在学习的过程中，不要跳跃性地阅读，因为里面每一句话都值得你精读。

1.3　jQuery下载与安装

1.3.1　下载jQuery

对于jQuery文件，我们可以到jQuery官网下载，地址是：http://jquery.com。不知道怎么在jQuery官网下载的小伙伴也不用担心，本书源代码附有jQuery库文件，大家直接下载即可。

jQuery文件有两个常用版本：一个是1.x版本，另一个是3.x版本。3.x版本是目前的最新版本，与1.x版本有着相同的API。1.x版本兼容IE6、IE7和IE8，而3.x版本不兼容IE6、IE7和IE8。在实际开发中，我们建议使用1.x版本，而不是3.x版本，原因有两个。

·现在很多网站还是要考虑兼容IE6~IE8。

·大多数jQuery插件不支持3.x版本，只支持1.x版本。

不管是1.x版本，还是3.x版本，jQuery文件都有两种类型：①开发版；②压缩版。表1-1是这两种类型的比较。

表1-1　两种类型jQuery库文件的比较

开发版是没有压缩的，以“jquery.js”命名，一般供开发者学习jQuery内部的实现原理。压缩版是经过高度压缩的，以“jquery.min.js”命名，一般供实际开发者使用。

在实际开发中，我们一般都是使用压缩版，也就是“jquery.min.js”版本。压缩版经过压缩，体积小很多，这样也可以提高页面加载速度。那么小伙伴们就会问了：“为什么不用开发版呢？”其实jQuery开发版是供大家学习jQuery内部原理的，也就是jQuery是怎么开发出来的。这就好比你使用一个软件，此时你是软件的使用者。但是要让你来开发软件，还得具备一定水平才行。对于初学者来说，我们暂时还没有那个水平去研究jQuery内部原理。

1.3.2　安装jQuery

jQuery文件，就是一个“外部JavaScript文件”。所谓的安装jQuery，其实就是把这个外部JavaScript文件引入后，就可以使用jQuery语法了。

对于1.x版本来说，现在最新版本是jquery-1.12.4.min.js。

语法

<script src="jquery-1.12.4.min.js"></script>  
<script>  
    //你的jQuery代码  
</script> 

说明

我们必须先把jQuery库文件引入，才能够使用jQuery语法。也就是说，你写的jQuery代码必须放在jQuery库文件下面才能生效。

像下面这种方式就是错误的，很多初学者容易犯这种错误，大家要特别注意。

<script> 
    //你的jQuery代码 
</script> 
<script src="jquery-1.12.4.min.js"></script> 

此外，jQuery库文件的路径一定要写正确。不少初学者总是发现自己写的jQuery代码没有实现相应的效果，原因很可能就是引入的jQuery库文件路径没有写正确。

1.4　本章练习

单选题

下面有关jQuery的说法中，不正确的是（　　）。

A.jQuery就是使用JavaScript编写出来的

B.jQuery的兼容性非常差

C.相对原生JavaScript来说，jQuery语法更简洁

D.在实际开发中，我们一般都是使用jQuery压缩版

注：本书所有练习题的答案请见本书的配套资源，配套资源的具体下载方式见前言。

第2章　基础选择器

2.1　jQuery选择器简介

选择器，就是用一种方式把你想要的那一个元素选中。把这个元素选中了，你才能对它进行各种操作。jQuery选择器和CSS选择器几乎完全一样，我们在接下来的学习中应该多对比一下这两者，这样学习速度可以提高很多。

在JavaScript中，如果想要选取元素，只能使用getElementById()、getElementsByTagName()、getElementsByClassName()等方法来获取。这些方法的功能有限，并且名字“又长又臭”，估计已经吓跑了不少初学的小伙伴。

而jQuery选择器完全继承了CSS选择器的风格，极大地方便了我们的开发。因为它不仅语法简单，而且功能也非常强大。jQuery选择器有两类：一类是“基础选择器”，另一类是“伪类选择器”。这一章我们先学习基础选择器，第3章再学习伪类选择器。在jQuery中，基础选择器有以下3种。

·基本选择器。

·层次选择器。

·属性选择器。

jQuery选择器非常多，估计很多初学者还没开始学就糊涂了。在初学阶段，建议大家至少认真学习一遍，忘了没关系，等到实际开发需要用到的时候，我们再返回来翻看一下，多翻看几次就熟悉了。

实际上，我们接触的新知识如果没有经过实践，只是简单地看过一遍，大多数都是很容易忘记的。换一句话来说，学习新知识只是一个“输入”过程，而新知识只有经过多次实践（也就是“输出”）才会真正转化成自己知识体系的一部分。

2.2　基本选择器

jQuery选择器的功能就是选中你想要的元素，然后对该元素进行操作。其中，选择器的语法格式如下。

$("选择器")

在这一节中，我们先介绍jQuery中的基本选择器。所谓基本选择器，指的是在实际开发中使用频率较高的一种选择器。基本选择器有以下4种。

·元素选择器。

·id选择器。

·class选择器。

·群组选择器。

2.2.1　元素选择器

元素选择器，用于选中相同的元素，然后对相同的元素进行操作。

语法

$("元素名")

举例

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="js/jquery-1.12.4.min.js"></script> 
    <script> 
        $(function () { 
            $("div").css("color","red"); 
        }) 
    </script> 
</head> 
<body> 
    <div>绿叶学习网</div> 
    <p>绿叶学习网</p> 
    <span>绿叶学习网</span> 
    <div>绿叶学习网</div> 
</body> 
</html> 

预览效果如图2-1所示。

分析

$(function () { 
    …… 
}) 

上面代码功能和window.onload=function(){……}是相似的，也就是在文档加载完成后执行内部的代码。以后凡是用到jQuery代码，我们都需要在上面代码的内部编写。对于这个代码，我们在“6.2　页面事件”这一节中会详细介绍。这里建议小伙伴们先去看一下6.2节的内容，再回到这里继续学习。

在这个例子中，$("div")使用的是元素选择器，表示选中所有的div元素。css("color","red")表示将元素的颜色定义为红色。对于css()这个方法，我们在“5.2　样式操作”这一节会详细介绍。此外，由于css()是“对象的一个方法”，因此我们使用“.”（点运算符）来调用，即$("div").css()。

此外，我们可以发现jQuery选择器与CSS选择器几乎是完全一样的。事实上，我们只需要把CSS选择器的写法套入$("")中，就可以变成jQuery选择器，非常简单！

没错，通过这么简单的一步操作，jQuery选择器就“诞生”了。实际上，其他类型的jQuery选择器也可以这样得到。

2.2.2　id选择器

id选择器，用于选中某个id的元素，然后对该元素进行各种操作。

语法

$("#id名") 

说明

id名前面必须加上前缀井号（#），否则该选择器无法生效。在id名前面加上“#”，表示这是一个id选择器。

举例

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="js/jquery-1.12.4.min.js"></script> 
    <script> 
        $(function () { 
            $("#lvye").css("color","red"); 
        }) 
    </script> 
</head> 
<body> 
    <div>绿叶学习网</div> 
    <div id="lvye">绿叶学习网</div> 
    <div>绿叶学习网</div> 
</body> 
</html> 

预览效果如图2-3所示。

分析

$("#lvye").css("color","red");表示选中id="lvye"的元素，然后定义其颜色为红色。

2.2.3　class选择器

class选择器，就是我们常说的“类选择器”。我们可以对“相同的元素”或者“不同的元素”定义一个相同的class，然后针对这个class的元素进行各种操作。

语法

$(".类名") 

说明

类名前面必须加上前缀英文句号（.），否则该选择器无法生效。类名前面加上英文句号（.），表示这是一个class选择器。

举例

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="js/jquery-1.12.4.min.js"></script> 
    <script> 
        $(function () { 
            $(".lv").css("color","red"); 
        }) 
    </script> 
</head> 
<body> 
    <div>绿叶学习网</div> 
    <p class="lv">绿叶学习网</p> 
    <span class="lv">绿叶学习网</span> 
    <div>绿叶学习网</div> 
</body> 
</html> 

预览效果如图2-4所示。

分析

$(".lv").css("color","red")表示选中class="lv"的所有元素，然后定义这些元素的颜色为红色。

2.2.4　群组选择器

群组选择器，用于同时对几个选择器进行相同的操作。

语法

$("选择器1, 选择器2, ... , 选择器n") 

说明

两个选择器之间必须用英文逗号（,）隔开，否则该选择器无法生效。

举例

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="js/jquery-1.12.4.min.js"></script> 
    <script> 
        $(function () { 
            $("h3,div,p,span").css("color","red"); 
        }) 
    </script> 
</head> 
<body> 
    <h3>绿叶学习网</h3> 
    <div>绿叶学习网</div> 
    <p>绿叶学习网</p> 
    <span>绿叶学习网</span> 
</body> 
</html> 

预览效果如图2-5所示。

分析

$("h3,div,p,span").css("color","red")表示选中所有的h3、div、p和span，然后定义这些元素的字体颜色为红色。

$(function () { 
    $("h3,div,p,span").css("color","red"); 
}) 

上面这段代码其实等价于：

$(function () { 
    $("h3").css("color","red"); 
    $("div").css("color","red"); 
    $("p").css("color","red"); 
    $("span").css("color","red"); 
}) 

2.3　层次选择器

层次选择器，就是通过元素之间的层次关系来选择元素的一种基础选择器。层次选择器在实际开发中也是相当重要的。常见的层次关系包括：父子、后代、兄弟、相邻。

在jQuery中，层次选择器共有4种，如表2-1所示。

表2-1　jQuery层次选择器

此外，我们还需要注意以下4点。

·$("M N")可以使用$(M).find(N)代替。

·$("M>N")可以使用$(M).children(N)代替。

·$("M~N")可以使用$(M).nextAll(N)代替。

·$("M+N")可以使用$(M).next(N)代替。

对于find()、children()、nextAll()、next()这4种方法，我们在后面“第10章　查找方法”中会详细介绍，这里简单了解一下即可。

2.3.1　后代选择器

后代选择器，用于选择元素内部的所有某一种元素，包括子元素和其他后代元素。

语法

$("M N") 

说明

“M元素”和“N元素”之间用空格隔开，表示选中M元素内部的后代N元素（即所有N元素）。

举例

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="js/jquery-1.12.4.min.js"></script> 
    <script> 
        $(function () { 
            $("#first p").css("color","red"); 
        }) 
    </script> 
</head> 
<body> 
    <div id="first"> 
        <p>lvye的子元素</p> 
        <p>lvye的子元素</p> 
        <div id="second"> 
            <p>lvye子元素的子元素</p> 
            <p>lvye子元素的子元素</p> 
        </div> 
        <p>lvye的子元素</p> 
        <p>lvye的子元素</p> 
    </div> 
</body> 
</html> 

预览效果如图2-6所示。

分析

$("#first p")表示选取id="first"的元素内部的所有p元素。因此，不管是子元素，还是其他后代元素，全部都会被选中。

2.3.2　子代选择器

子代选择器，用于选中元素内部的某一种子元素。子代选择器与后代选择器虽然很相似，但是也有着明显的区别。

·后代选择器，选取的是元素内部所有的元素（包括子元素、孙元素等）。

·子代选择器，选取的是元素内部的某一种子元素（只限子元素）。

语法

$("M>N") 

说明

“M元素”和“N元素”之间使用“>”选择符，表示选中M元素内部的子元素N。

举例

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="js/jquery-1.12.4.min.js"></script> 
    <script> 
        $(function () { 
            $("#first>p").css("color","red"); 
        }) 
    </script> 
</head> 
<body> 
    <div id="first"> 
        <p>lvye的子元素</p> 
        <p>lvye的子元素</p> 
        <div id="second"> 
            <p>lvye子元素的子元素</p> 
            <p>lvye子元素的子元素</p> 
        </div> 
        <p>lvye的子元素</p> 
        <p>lvye的子元素</p> 
    </div> 
</body> 
</html> 

预览效果如图2-7所示。

分析

$("#first>p")表示选中id="first"的元素下的子元素p。我们将这个例子与后代选择器的例子对比一下，就可以很清楚地知道：子代选择器只选取子元素，不包括其他后代元素。

2.3.3　兄弟选择器

兄弟选择器，用于选中元素后面（不包括前面）的某一类兄弟元素。

语法

$("M~N") 

说明

“M元素”和“N元素”之间使用“~”选择符，表示选中M元素后面所有的兄弟元素N。

举例

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="js/jquery-1.12.4.min.js"></script> 
    <script> 
        $(function () { 
            $("#second~p").css("color","red"); 
        }) 
    </script> 
</head> 
<body> 
    <div id="first"> 
        <p>lvye的子元素</p> 
        <p>lvye的子元素</p> 
        <div id="second"> 
            <p>lvye子元素的子元素</p> 
            <p>lvye子元素的子元素</p> 
        </div> 
        <p>lvye的子元素</p> 
        <p>lvye的子元素</p> 
    </div> 
</body> 
</html> 

预览效果如图2-8所示。

分析

$("#second~p")表示选取id="second"的元素后面所有的兄弟元素p。记住，兄弟选择器只选取后面所有的兄弟元素，不包括前面的所有兄弟元素。

2.3.4　相邻选择器

相邻选择器，用于选中元素后面（不包括前面）的某一个“相邻”的兄弟元素。相邻选择器与兄弟选择器也非常相似，不过也有明显的区别。

·兄弟选择器选取元素后面“所有”的某一类元素。

·相邻选择器选取元素后面“相邻”的某一个元素。

语法

$("M+N") 

说明

“M元素”和“N元素”之间使用“+”选择符，表示选中M元素后面的相邻的兄弟元素N。

举例

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="js/jquery-1.12.4.min.js"></script> 
    <script> 
        $(function () { 
            $("#second+p").css("color","red"); 
        }) 
    </script> 
</head> 
<body> 
    <div id="first"> 
        <p>lvye的子元素</p> 
        <p>lvye的子元素</p> 
        <div id="second"> 
            <p>lvye子元素的子元素</p> 
            <p>lvye子元素的子元素</p> 
        </div> 
        <p>lvye的子元素</p> 
        <p>lvye的子元素</p> 
    </div> 
</body> 
</html> 

预览效果如图2-9所示。

分析

$("#second+p")表示选取id="second"的元素后面的“相邻”的兄弟元素p。

举例

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="js/jquery-1.12.4.min.js"></script> 
    <script> 
        $(function () { 
            $("li+li").css("border-top", "2px solid red"); 
        }) 
    </script> 
</head> 
<body> 
    <ul> 
        <li>第1个元素</li> 
        <li>第2个元素</li> 
        <li>第3个元素</li> 
        <li>第4个元素</li> 
        <li>第5个元素</li> 
    </ul> 
</body> 
</html> 

预览效果如图2-10所示。

分析

$("li+li")使用的是相邻选择器，表示“选择li元素后面相邻的（下一个）li元素”。由于最后一个li元素没有下一个li元素，所以对于最后一个li元素，它是没有下一个li元素可以选取的。$("li+li").css("border-top","2px solid red")可以实现在两两li元素之间添加一个边框的效果。

这是一个非常棒的技巧，在实际开发中如果我们想要在两两元素之间实现某种效果（border、margin等），我们会经常用到这个技巧！大家一定要重点掌握。例如图2-11所示的底部信息栏就可以用这个技巧来实现，大家可以尝试去操作一下。

在这一节中，其实我们主要讲解的是两组选择器。

·后代选择器和子代选择器。

·兄弟选择器和相邻选择器。

这样划分就一目了然了。大家可以根据这个划分，深入对比，多次实践，这样才能加深理解和记忆。

2.4　属性选择器

属性选择器，指的是通过“元素的属性”来选择元素的一种基础选择器。例如下面这句代码中的id、type、value就是input元素的属性。

<input id="btn" type="button" value="按钮" />

在jQuery中，常见的属性选择器如表2-2所示。其中E指的是元素，attr指的是属性，value指的是属性值。

表2-2　jQuery属性选择器

jQuery的这些属性选择器使得选择器具有通配符的功能，有点正则表达式的感觉。下面我们通过一些简单的实例来认识一下。

·选取含有class属性的div元素。

$("div[class]") 

·选取type取值为checkbox的input元素。

$("input[type = 'checkbox']") 

·选取type取值不是checkbox的input元素。

$("input[type != 'checkbox']") 

·选取class属性包含nav的div元素（class属性可以包含多个值）。

$("div[class *= 'nav']") 

·选取class属性以nav开头的div元素，例如<div class="nav-header"></div>。

$("div[class ^= 'nav']") 

·选取class属性以nav结尾的div元素，例如<div class="first-nav"></div>。

$("div[class $= 'nav']") 

·选取带有id属性并且class属性是以nav开头的div元素，例如<div id="container"class="nav-header"></div>。

$("div[id][class ^='nav']") 

举例

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="js/jquery-1.12.4.min.js"></script> 
    <script> 
        $(function () { 
            $("li[class]").css("color", "red"); 
        }) 
    </script> 
</head> 
<body> 
    <ul> 
        <li>HTML</li> 
        <li class="select">CSS</li> 
        <li>JavaScript</li> 
        <li class="select">jQuery</li> 
        <li>Vue.js</li> 
    </ul> 
</body> 
</html> 

预览效果如图2-12所示。

分析

$("li[class]")表示选取带有class属性的li元素。在实际开发中，属性选择器还是在表单操作中用得最多，在后续章节我们会慢慢接触。

2.5　本章练习

一、单选题

1.下面有一段代码，则四个选项中只能获取第2个div元素的是（　　）。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
</head> 
<body> 
    <div id="first"></div> 
    <div></div> 
    <div></div> 
</body> 
</html> 

A.$("#first div")

B.$("#first>div")

C.$("#first~div")

D.$("#first+div")

2.下面有一段代码，如果想要为两个li元素之间添加一个10px的间距，正确的jQuery选择器写法应该是（　　）。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
</head> 
<body> 
    <ul> 
        <li>第1个元素</li> 
        <li>第2个元素</li> 
        <li>第3个元素</li> 
        <li>第4个元素</li> 
        <li>第5个元素</li> 
    </ul> 
</body> 
</html> 

A.$("li+li").css("margin-top","10px")

B.$("li+li").css("margin-top","-10px")

C.$("li+li").css("margin-bottom","10px")

D.$("li+li").css("margin-bottom","-10px")

二、编程题

请写出下面对应的jQuery选择器，每一项对应一个。

（1）选取含有href属性的a元素。

（2）选取type取值为radio的input元素。

（3）选取type取值不是checkbox的input元素。

（4）选取class属性包含nav的div元素（class属性可以包含多个值）。

（5）选取class属性以article开头的div元素，例如<div class="article-title"></div>。

（6）选取class属性以content结尾的div元素，例如<div class="article-content"></div>。

（7）选取带有id属性并且class属性是以article开头的div元素，例如<div id="container"class="article-title"></div>。