Jquery 介绍

一、实验介绍

1.1 实验内容

本节实验将带领大家了解 jQuery 的定义，它有什么作用，我们为什么要学它，以及如何使用它，它的语法是什么，最后对比了 jQuery 对象和 DOM 对象的区别。

由于实验楼使用是 WebIDE 的在线环境，所以有不熟悉对同学请阅读：实验楼 WebIDE 使用指南 的前端部分。

1.2 实验知识点

• 什么是 jQuery
• jQuery 特色
• 为什么要学习 jQuery
• 配置 jQuery 环境
• jQuery 语法
• jQuery 代码风格
• jQuery 对象和 DOM 对象
• 解决 jQuery 和其他库的冲突

1.3 实验环境

• Theia: 一款前后端分离的、基于 web 的 云 IDE。
• Preview 或 Mini Browser：浏览器，右键点击目标 html 文件，选择 open with 下的 Preview 或 Mini Browser 即可在 IDE 中打开浏览器。

1.4 参考链接

• jQuery 中文官网
• 《锋利的 jQuery 第二版》
• 知乎文章：再见 jQuery，我的老朋友

二、jQuery 简介

2.1 什么是 jQuery

jQuery 是开源软件，使用 MIT 许可证授权。jQuery 的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、以及开发 Ajax 程序。jQuery 也给开发人员提供了在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使 jQuery 函数库能够创建功能强大的动态网页以及网络应用程序。

微软和诺基亚已宣布在他们的平台上绑定 jQuery。微软最初在 Visual Studio 中集成了 jQuery 以便在微软自己的 ASP.NET AJAX 框架和 ASP.NET MVC Framework 中使用，而诺基亚则在他的 Web 运行时组件开发平台中集成了 jQuery。MediaWiki 自从 1.16 版本后也开始使用 jQuery。

jQuery 1.3 版以后，引入全新的层叠样式表（CSS）选择器引擎 Sizzle。同时不再提供 Packed 版本，因为解压缩所消耗的时间，远大于所节省的下载时间，且不利于调试，且已有 Google AJAX Libraries API 等公开站台提供 jQuery 的 js 的引用服务，故 Packed 版本原本的优点已荡然无存。

注：定义来自维基百科。

我们可以简单的理解为 jQuery 是一个 JavaScript 函数库。jQuery 是一个轻量级的”写的少，做的多”的 JavaScript 库。

2.2 特色

• 使用多浏览器开源选择器引擎 Sizzle（jQuery 项目的派生产品）进行 DOM 元素选择
• 基于 CSS 选择器的 DOM 操作，使用元素的名称和属性（如 id 和 class）作为选择 DOM 中节点的条件
• 事件
• 特效和动画
• Ajax
• Deferred 和 Promise 对象来控制异步处理
• JSON 解析
• 通过插件扩展
• 工具函数，如特征检测
• 现代浏览器中本地的兼容性方法，但对于旧版浏览器需要后备（fallback）方法，比如 inArray()和 each()
• 多浏览器（不要与跨浏览器混淆）支持

三、为什么要学习 jQuery

新闻一：

2018 年 7 月 25 日，Mislav Marohnić 发了一条推文，宣布 GitHub.com 前端已经彻底删除了 jQuery。而且，还自问自答地解释，删除 jQuery 之后也没用其他框架，而是全部依赖原生 API。

新闻二：

Bootstrap 发布了最新版本 4.3.0(https://blog.getbootstrap.com/2019/02/11/bootstrap-4-3-0/)，作为 Bootstrap 4.3 发布的一部分，团队也公布了下一个主要版本 Bootstrap 5 的开发计划。

开发团队表示在发布 v4.3 版本后，将会在开发 Bootstrap 5 的过程中实现一些关键变化，或许会是重大的变化，而这也将被认为是 Bootstrap 5 的基础。开发团队重点提到了以下几方面：

放弃 jQuery：Bootstrap 5 将删除 jQuery 作为依赖项。开发团队已经在这方面工作了很长时间，PR 也是处于正在进行中并已接近完成的状态(https://github.com/twbs/bootstrap/pull/23586)

改进开发分支：v3-dev 分支将成为 master 分支；v4-dev 则保持原样，不过会从该分支切出一个新的 master 分支来开发 v5 版本

从 Jekyll 迁移到 Hugo：目前已有一个 PR 正在进行并且已接近完成(https://github.com/twbs/bootstrap/pull/28014)

移除 jQuery 这个最大的依赖之后，开发团队表示未来将使用原生的纯 JavaScript 来代替 jQuery。这和去年 GitHub 改版重构页面时移除了 jQuery 的举措有点像。

当时 GitHub 的前端团队趁着改版的机会，在重构页面时乘机移除了其中的 jQuery，并且没有使用其它框架来代替 jQuery，而是使用原生 JS：

• 用 querySelectorAll 来查询 DOM 节点
• 使用 fetch 代替 ajax（在不支持的浏览器上使用 XHR）
• 使用代理事件来进行事件处理
• 为一些尚未实现的 DOM 标准写了 polyfill
• 更多地使用自定义元素 (CustomElement)

从这些信息来看，jQuery 正在一步步走向消亡，那么我们还有必要学习 jQuery 吗？首先我们来回顾一下 jQuery 的辉煌。

3.1 jQuery 的辉煌

jQuery 最初诞生于 2006 年 8 月，作者是 John Resig（https://zh.wikipedia.org/wiki/JQuery）。10 多年前，网页开发者（当时还没有“前端”这个概念）深受浏览器不兼容性之苦。以 jQuery 为代表的一批 JavaScript 库/框架应运而生。

jQuery 官网是这样描述的：

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery 强调的理念就是写的少，做的多（write less,do more）。它有如下的优势：

• 轻量级。
• 强大的选择器。
• 出色的 DOM 操作的封装。
• 可靠的事件机制。
• 完善的 ajax。
• 不污染顶级变量。
• 出色的浏览器兼容性。
• 链式操作方式。
• 隐式迭代。
• 行为层与结构层的分离。
• 丰富的插件支持。
• 完善的文档。
• 开源。

2011 年新版的“犀牛书”第 6 版——JavaScript: The Definitive Guide, 6th（JavaScript 权威指南第六版）甚至拿出第 19 章整整 64 页篇幅隆重讲解了 jQuery（“Chapter 19. The jQuery Library”）。jQuery 从此走向鼎盛和辉煌。后来，随着前端交互越来越重和移动应用的普及，jQuery UI、jQuery Mobile 相继面世。时至今日，jQuery 仍然在支撑着数以千万计各种规模网站的运作——尽管聚光灯下已经不常看到她的身影。

最近 10 年，是“前端行业”有史以来发展最快的 10 年。

移动社交时代的到来不仅没有让桌面 Web 失色，反倒刺激了 Web 标准的迅猛改进。HTML5 不仅带来了极大的向后兼容性，也带来了更丰富的原生 DOM API。CSS 从 CSS3 开始走上模块化的快车道，文本样式、排版布局、媒体查询，各种新模块让人目不暇接。

各大主流浏览器也在快速跟进，Firefox、Chrome、Opera、Safari、IE 乃至 Edge，都在积极重构甚至重写内核，争做支持 Web 标准的“楷模”。在这个大背景下，各大互联网公司不断调高兼容的 IE 版本号，从 8 到 9 到 10，再到 11。

当然，还有 ECMAScript 语言标准。自从划时代的 ES6（ECMAScript 2015）发布之后，JavaScript 终于真正开始摆脱“玩具”语言的尴尬境地。更重要的，从 ES6 起，ECMAScript 也进入了快速迭代、每年发一版的节奏。ES7、ES8，以及 ES9，每次都会给这门语言注入更强大的语言特性。

与此同时，Node.js 和 Babel 等服务端运行时及转译工具的出现，也让前端工程化，以及向传统工业级软件开发最佳实践靠拢的速度日益加快。

谷歌主打 SPA（Single Page Application，单页应用）的 Angular 终于一枝独秀。不久，脸书推出的“在 JS 里写 HTML 一样优雅”的 React 则一路高歌猛进。最终，集各家所长且简单易用的 Vue 横空出世。

前端开发已经从后“刀耕火种”时代的“农业文明”，逐渐进化为以大规模、可扩展、规范化、自动化为特征的准“工业文明”。

俗话说：“皮之不存，毛将焉附。”随着时代变迁、技术进步，jQuery 赖以存在的环境正逐渐消失。如前所述，新的环境催生了一批框架新秀。曾经辉煌的 jQuery 终于走到了可以华丽谢幕的时刻。

注：以上文章部分摘取自知乎文章：再见 jQuery，我的老朋友。另外推荐一篇文章 jQuery 都过时了，那我还学它干嘛？

对于小白来说，还是可以简单的学一下 jQuery 的，因为 jQuery 真的很简单，甚至都不需要你会多少 JavaScript，你就可以学会，我们可以简单的学一下 jQuery 的思想，有利于我们去学习现在主流的三大框架：vue，react，angular。而且虽然 jQuery 已经渐渐的退出了历史舞台，新写的项目都很少会再使用 jQuery 了，但是其实很多大公司的一些老项目还是有用到 jQuery 的，不要以为大厂的技术栈就一定会很新很新，其实大厂会有很多老项目需要维护的，这个时候就算你懂前端所有的新技术，但是在大厂你负责的项目可能需要你对 jQuery 有深入的理解，这样你才能维护好这个项目。而创业公司为了快速适应市场，追求的是产品开发效率，vue,react 等则极大的提高了开发效率。在竞争日益激烈的互联网环境下，多学点东西总是没坏处的，而且它真的很简单，我们花了几天来学习一下又有何不可？简历上也能多写一项会的技能。

• jQuery：我们考虑如何操作 DOM，jQuery 考虑如何让我们更方便地操作 DOM。
• vue 和 React：我们考虑如何操作数据，框架考虑如何将改变后的数据更新到界面。

这里贴一张网络上的搞笑图：

四、配置 jQuery 环境

进入 jQuery 的官方网站 http://jquery.com/,可以下载最新的 jQuery 文件到本地，然后再引入到项目即可。官方网站如下所示：

引入代码示例：

<head>
  <script type="text/javascript" src="jquery.js"></script>
</head>

注意：这里的路径位置，请大家根据实际的情况自行调整。另外官方网站有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读），请大家根据自己的需要自行选择下载。实验楼课程中可以通过命令下载：

wget https://labfile.oss.aliyuncs.com/courses/22/jquery-3.3.1.js

当然如果我们不想把 jQuery 下载到本地，也可以使用 Google 的 CDN 或者使用 Microsoft 的 CDN：

使用 Google 的 CDN：

Google CDN 国内已经无法访问，以下内容仅作演示。

<head>
  <script
    type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"
  ></script>
</head>

使用 Microsoft 的 CDN：

<head>
  <script
    type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"
  ></script>
</head>

注：实验楼的环境中不能连外网，所以大家本地可以使用 CDN 的方式，实验楼环境下，通过前面的命令下载下来然后引入的方式来使用。

五、jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：

$(selector).action();

• 美元符号 $ 定义 jQuery。
• 选择符（selector）“查询”和“查找” HTML 元素。
• jQuery 的 action() 执行对元素的操作。

另外需要注意的是：在 jQuery 库中 $ 符号就是 jQuery 的一个简写形式，例如 $("#syl") 和 jQuery("#syl") 是等价的，$.ajax 和 jQuery.ajax 是等价的，如果没有特别说明，程序中的 $ 符号都是 jQuery 的一个简写形式。

5.1 文档就绪函数

所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
});
// 可以简写成
$(funciton(){
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

• 试图隐藏一个不存在的元素。
• 获得未完全加载的图像的大小。

上面的这段代码其实有点类似于传统 JavaScript 中的 window.onload 方法，不过它们还是有一些区别的，简单对比如下所示：

编写个数的意思就是：

window.onload = function () {
  alert("test1");
};
window.onload = function () {
  alert("test2");
};
//结果只会输出 test2。
$(document).ready(function () {
  alert("test1");
});
$(document).ready(function () {
  alert("test2");
});
//结果两次都输出

5.2 编写我们的第一个 jQuery 程序

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!-- Google 的 CDN 的方式加载jQuery，请大家自行修改为本地 -->
    <script
      type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"
    ></script>
  </head>
  <body>
    <script type="text/javascript">
      //等待dom元素加载完毕
      $(document).ready(function () {
        //弹出一个框:显示hello syl
        alert("hello syl");
      });
    </script>
  </body>
</html>

请大家将加载 jQuery 的 Google 的 CDN 改为我们之前讲到的引入本地的 jQuery 文件，请大家将它下载下来然后做一个替换，因为在环境内无法访问到这些 CDN，之后的实验中同理，不再赘述。

修改内容为，将<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>修改为<script type="text/javascript" src="jquery.min.js"></script>。这里需要使用前面的命令，将 jquery.min.js 下载到与代码文件同一路径目录下。

运行效果为：

六、jQuery 代码风格

良好的代码风格使得代码更加具有可读性，适当的注释代码，对于日后代码的维护也是非常有利的。来看个例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery.min.js"></script>
  </head>
  <body>
    <div class="box">
      <ul class="menu">
        <li class="level1">
          <a href="#">春天</a>
          <ul class="level2">
            <li>春意盎然</li>
            <li>春意盎然</li>
            <li>春意盎然</li>
            <li>春意盎然</li>
          </ul>
        </li>
        <li class="level1">
          <a href="#">夏天</a>
          <ul class="level2">
            <li>夏日炎炎</li>
            <li>夏日炎炎</li>
            <li>夏日炎炎</li>
            <li>夏日炎炎</li>
          </ul>
        </li>
        <li class="level1">
          <a href="#">秋天</a>
          <ul class="level2">
            <li>秋高气爽</li>
            <li>秋高气爽</li>
            <li>秋高气爽</li>
            <li>秋高气爽</li>
          </ul>
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      //等待dom元素加载完毕
      $(document).ready(function () {
        $(".level1>a").click(function () {
          $(this)
            .addClass("current")
            .next()
            .show()
            .parent()
            .siblings()
            .children("a")
            .removeClass("current")
            .next()
            .hide();
          return false;
        });
      });
    </script>
  </body>
</html>

代码很简单，我们没有加入 css 样式这些，主要还是讲解 jQuery，运行效果为：

简单解释一下这段代码，当鼠标点击到 a 标签的时候给其添加一个名为 current 的 class，然后调用 next() 和 show() 将其后面的元素显示出来，然后调用 parent()、siblings()、children(“a”) 将它的父辈的同辈元素的内部的子元素 a 都去掉一个名为 current 的 class (removeClass("current"))，并且将紧邻它们后面的元素都隐藏。

这就是 jQUery 的强大的链式操作，一行代码就完成了我们导航栏的功能，大家可以试着去写一下原生的 JavaScript 代码，看看需要写多少行，这也就是我们 jQuery 的魅力所在。当然上面的那些方法看不懂也没关系，后面都会讲解的。不过为了进一步改善代码的可读性和可维护性，推荐一种写法：

$(document).ready(function () {
  $(".level1>a").click(function () {
    $(this)
      .addClass("current") //给当前元素添加"current"样式
      .next()
      .show() //下一个元素显示
      .parent()
      .siblings()
      .children("a")
      .removeClass("current") //父元素的同辈元素的子元素a移除"current"样式
      .next()
      .hide(); //它们的下一个元素隐藏
    return false;
  });
});

也就是说适当的换行和添加注释可以让我们对代码作用一目了然，增加代码的可读性，便于日后的维护，提高开发效率。

七、jQuery 对象和 DOM 对象

7.1 DOM 对象

DOM （Document Object Model）对象，也就是我们经常说的文档对象模型，每一份 DOM 都可以表示成一棵 DOM 树：

比如这样的一段代码：

<h1></h1>
<p></p>
<ul>
  <li></li>
</ul>

h1,p,ul 以及 li 标签都是 DOM 元素节点，我们可以通过 JavaScript 中的 document.getElementById()，document.getElementsByTagName() 等来获取元素节点，像这样获取的 DOM 元素就是 DOM 对象，DOM 对象可以使用 JavaScript 中的方法，比如：

var domObj = document.getElementById("id"); //获取DOM对象
var objHtml = domObj.innerHTML; //使用JavaScript中的属性innerHTML

7.2 jQuery 对象

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，如果一个对象是 jQuery 对象，那么它就可以使用 jQuery 里的方法，比如：

$("#syl").html(); //获取id为syl的元素内的html代码，html()是jQuery中的方法

这段代码等同于：

document.getElementById("syl").innerHTML;

在 jQuery 对象中无法使用 DOM 对象中的任何方法，例如 $("#syl").innerHTML; 之类的写法是错的，可以使用 $("#syl").html(); 之类的 jQuery 方法来代替，同样的道理，DOM 对象也不能使用 jQuery 里的方法，例如:document.getElementById("syl").html();也是会报错的。

注：用 #id 作为选择符取得的是 jQuery 对象而并非 document.getElementById("id"); 所得到的 DOM 对象，两者并不等价。我们一定要从开始就树立这样的一个观念：jQuery 对象和 DOM 对象是有区别的，它们并不是等价的。

jQuery 对象和 DOM 对象之间的相互转换

在讲解 jQuery 对象和 DOM 对象之间的相互转换之前，我们先约定好定义变量的风格，如果获取的是 jQuery 对象，那么我们在变量前面加上 $ 符号，例如：

var $test = jQuery 对象;

如果获取的是 DOM 对象：

var test = DOM 对象;

注：这里加个 只是为了区分变量是 jQuery 对象还是 DOM 对象并不是说所有使用 jQuery 的代码中变量声明都需要只是为了区分变量是jQuery对象还是_D_OM对象并不是说所有使用_j_Query的代码中变量声明都需要。

1. jQuery 对象转换为 DOM 对象

我们前面说过 jQuery 对象不能使用 DOM 中的方法，但是如果我们又不得不使用 DOM 中的方法呢？比如：对 jQuery 对象所提供的方法不熟悉或者忘了但是知道 DOM 中的方法，自己又很懒不想去查 jQuery 手册或者 jQuery 本身就没有封装我们想要使用的方法。有以下的两种处理方法：

• [index]:jQuery 对象是一个类似数组的对象，可以通过 [index] 的方法得到对应的 DOM 对象，比如：

var $cr = $("#cr"); //jQuery 对象
var cr = $cr[0]; //DOM 对象

• 通过 get(index) 方法得到相应的 DOM 对象，比如：

var $cr = $("#cr"); //jQuery 对象
var cr = $cr.get(0); //DOM 对象

1. DOM 对象转换为 jQuery 对象

对于一个 DOM 对象，只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象了，比如：

var cr = document.getElementById("cr"); //DOM 对象
var $cr = $(cr); //jQuery 对象

注：这里再次强调一次，DOM 对象才能使用 DOM 中的方法，jQuery 对象不可以使用 DOM 中的方法，但 jQuery 对象提供了一套更加完善的工具用于操作 DOM，在后面的学习中，我们都会为大家一一的进行讲解。我们平时用到的 jQuery 对象都是通过 () 函数制造出来的，()函数制造出来的，() 函数就是一个 jQuery 对象的制造工厂。

下面我们来看个例子：

DOM 方式判断复选框是否被选中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <input type="checkbox" id="cr" /><label for="cr">我已阅读协议</label>
    <script type="text/javascript">
      //等待dom元素加载完毕
      $(document).ready(function () {
        var $cr = $("#cr"); //jQuery对象
        var cr = $cr[0]; //DOM对象，或者$cr.get(0)
        $cr.click(function () {
          if (cr.checked) {
            //DOM方式判断
            alert("你已同意本协议");
          }
        });
      });
    </script>
  </body>
</html>

jQuery 方式判断复选框是否被选中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <input type="checkbox" id="cr" /><label for="cr">我已阅读协议</label>
    <script type="text/javascript">
      //等待dom元素加载完毕
      $(document).ready(function () {
        var $cr = $("#cr");
        $cr.click(function () {
          if ($cr.is(":checked")) {
            alert("你已同意本协议");
          }
        });
      });
    </script>
  </body>
</html>

注：上面的例子简单的演示了 DOM 对象和 jQuery 对象的不同，但是最终的运行效果是一样的。

八、解决 jQuery 和其他库的冲突

jQuery 使用 符号作为 jQuery 的简写。如果其他 JavaScript 框架也使用符号作为jQuery的简写。如果其他_J_avaScript框架也使用 符号作为简写怎么办？

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。当然，我们仍然可以通过全名替代简写的方式来使用 jQuery：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
    </head>
    <body>
        <p>这是一个段落。</p>
        <button>点我</button>
        <script type="text/javascript">
            //等待dom元素加载完毕
            $.noConflict();
            jQuery(document).ready(function() {
                jQuery("button").click(function() {
                    jQuery("p").text("jQuery 仍然在工作!");
                });
            });
        </script>
    </body>
</html>

我们也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，我们可以把它存入变量，以供稍后使用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <p>这是一个段落。</p>
    <button>点我</button>
    <script type="text/javascript">
      //等待dom元素加载完毕
      var jq = $.noConflict();
      jq(document).ready(function () {
        jq("button").click(function () {
          jq("p").text("jQuery 仍然在工作!");
        });
      });
    </script>
  </body>
</html>

如果你的 jQuery 代码块使用 简写，并且您不愿意改变这个快捷方式，那么您可以把简写，并且您不愿意改变这个快捷方式，那么您可以把 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了，而在函数外，依旧不得不使用 “jQuery”：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <p>这是一个段落。</p>
    <button>点我</button>
    <script type="text/javascript">
      //等待dom元素加载完毕
      $.noConflict();
      jQuery(document).ready(function ($) {
        $("button").click(function () {
          $("p").text("jQuery 仍然在工作!");
        });
      });
    </script>
  </body>
</html>

运行效果都为：

九、总结

在本节实验中我们主要学习了以下内容：

• 什么是 jQuery
• jQuery 特色
• 为什么要学习 jQuery
• 配置 jQuery 环境
• jQuery 语法
• jQuery 代码风格
• jQuery 对象和 DOM 对象
• 解决 jQuery 和其他库的冲突

通过本节的学习我们初步熟悉了 jQuery 的定义以及语法，并且完成了第一个 jQuery 例子的编写，感受到了 jQuery 的魅力所在，下一节我们将学习 jQuery 选择器的内容。

jQuery 选择器

一、实验介绍

1.1 实验内容

本节实验将带领大家学习 jQuery 选择器的使用。

1.2 实验知识点

• jQuery 选择器是什么
• jQuery 选择器的优势
• 基本选择器
• 层次选择器
• 表单选择器
• 过滤选择器

1.3 实验环境

• Theia: 一款前后端分离的、基于 web 的 云 IDE。
• Preview 或 Mini Browser：浏览器，右键点击目标 html 文件，选择 open with 下的 Preview 或 Mini Browser 即可在 IDE 中打开浏览器。

1.4 参考链接

• jQuery 中文网

二、jQuery 选择器是什么

• jQuery 中 的选择器完全继承了 CSS 的风格，通过使用 jQuery 选择器，我们可以快速的找到目标 DOM 元素，然后对它们进行一系列操作，学会使用选择器是学习 jQuery 的基础，jQuery 的行为规则都必须在获取到元素后才能生效。
• jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
• jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
• jQuery 中所有选择器都以美元符号开头：$()。
• jQuery 选择器的写法和 CSS 选择器的写法十分相似，只不过两者的作用效果不同，CSS 选择器找到元素后是添加样式，而 jQuery 选择器找到元素后是添加行为，jQuery 中涉及操作 CSS 样式的部分比单纯的 CSS 功能更为强大，并且拥有跨浏览器的兼容性。

jQuery 选择器的优势

• 简洁的写法。
• 支持 CSS1 到 CSS3 选择器。兼容性良好，可以直接使用而无需考虑浏览器的兼容性。
• 完善的处理机制。使用 jQuery 选择器不仅比使用传统的 DOM 对象方法简洁得多，而且还能避免某些错误，比如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div id="">实验楼</div>
    <script type="text/javascript">
      document.getElementById("syl").style.color = "red";
    </script>
  </body>
</html>

运行后是会报错的，这是因为网页中并没有 id 名为 “syl” 的元素，报错如下所示：

改进一下后的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div id="">实验楼</div>
    <script type="text/javascript">
      if (document.getElementById("syl")) {
        document.getElementById("syl").style.color = "red";
      }
    </script>
  </body>
</html>

这样就不会报错了，但是如果要操作的元素很多，对每个元素都进行一次判断，显然是不合理的，不判断的话，以后因为某种原因删除了网页上某个以前使用的元素，再来改也会很麻烦，而使用 jQuery 选择器的话，则不用担心这个问题：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div id="">实验楼</div>
    <script type="text/javascript">
      $("#syl").css("color", "red");
    </script>
  </body>
</html>

另外需要特别注意的是，$('#syl') 获取的永远是对象，即使网页上没有此元素，因为当要用 jQuery 来检查某个元素再网页上是否存在时，不能使用下面的代码：

if ($("#syl")) {
}

而应该根据获取到元素的长度来判断，代码如下所示：

if ($("#syl").length > 0) {
}

或者转化成 DOM 对象来判断，代码如下：

if ($("#syl")[0]) {
}

三、基本选择器

基本选择器是 jQuery 中最常用的选择器，也是最简单的选择器，它通过元素 id、class 和 标签名等来查找 DOM 元素。

（1）ID Selector ("#id") 选择一个具有给定 id 属性的单个元素

对于 ID 选择，jQuery 使用 JavaScript 函数 document.getElementById()，这是非常有效的。当另一个选择是附加到 ID 选择器，比如 h2#pageTitle，在确定作为匹配的元素前，jQuery 执行一个额外的检查。

调用 jQuery() (或 $()) 带上一个选择器作为它的参数，将返回一个 jQuery 对象包含零个或一个 DOM 元素的集合。

每个 id 值在一个文件中只能使用一次。如果多个元素分配了相同的 ID，将只匹配该 ID 选择集合的第一个 DOM 元素。但这种行为不应该发生;有超过一个元素的文件使用相同的 ID 是无效的。

如果 ID 包含点号或冒号，你必须将 这些字符用反斜杠转义。

例子：

选择 id 为 demo 的元素，并为此元素设置长、宽、背景色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div id="demo"></div>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#demo").css({
          width: "100px",
          height: "100px",
          "background-color": "red",
        });
      });
    </script>
  </body>
</html>

运行效果为：

（2）Class Selector (".class") 选择给定样式类名的所有元素

对于类选择器，如果浏览器支持，jQuery 使用 JavaScript 的原生 getElementsByClassName() 函数来实现。

例子：

选择 class 为 demo 的元素，并为此元素设置长、宽、背景色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div class="demo"></div>
    <script type="text/javascript">
      $(document).ready(function () {
        $(".demo").css({
          width: "100px",
          height: "100px",
          "background-color": "red",
        });
      });
    </script>
  </body>
</html>

注：运行效果同上。

（3）Element Selector ("element") 根据给定（html）标记名称选择所有的元素

调用 JavaScript 的 getElementsByTagName() 函数，当该表达式使用时返回相应的元素。

例子：

选择所有 div 元素,并为所有元素设置长、宽、背景色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div>shiyanlou1</div>
    <div>shiyanlou2</div>
    <script type="text/javascript">
      $(document).ready(function () {
        $("div").css({
          width: "100px",
          height: "100px",
          "background-color": "red",
        });
      });
    </script>
  </body>
</html>

运行效果为：

（4）All Selector ("*") 选择所有元素

选择页面所有元素，包括 body。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div>shiyanlou1</div>
    <div>shiyanlou2</div>
    <script type="text/javascript">
      $(document).ready(function () {
        $("*").css({
          width: "100px",
          height: "100px",
          "background-color": "red",
        });
      });
    </script>
  </body>
</html>

运行效果为：

警告： 除非被它自己使用，否则 * 选择器或通用选择器，其速度是极其慢的。

（5）Multiple Selector ("selector1, selector2, selectorN") 将每一个选择器匹配到的元素合并后一起返回

您可以指定任何数量的选择器组合成一个单一的结果。这个多个表达组合是一种有效的方法来选择不同的元素。因为他们将按在文件的顺序，DOM 元素的顺序在返回的 jQuery 象中可能不相同。另一种选择器组合是 .add() 方法。

例子：

用 “,” 分隔开然后再拼成一个选择器字符串，同时选择多个匹配的选择器的内容 选择页面所有元素，并设置字体大小。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div>shiyanlou</div>
    <a href="https://www.lanqiao.cn/">https://www.lanqiao.cn/</a>
    <script type="text/javascript">
      $(document).ready(function () {
        $("div,a").css({
          "font-size": "30px",
        });
      });
    </script>
  </body>
</html>

运行效果为：

四、 层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么我们可以使用 jQuery 层次选择器。

（1）Descendant Selector ("ancestor descendant")

选中给定的祖先元素的 ancestor 中的所有 descendant 元素（后代元素）。一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。

例子：

选择类名为 demo 的元素的所有后代 a 元素，并设置字体大小。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div class="demo">
      <a href="https://www.lanqiao.cn/">shiyanlou</a>
      <div class="innerDemo">
        <a href="https://www.lanqiao.cn/">SHIYANLOU</a>
      </div>
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        $(".demo a").css({
          "font-size": "30px",
        });
      });
    </script>
  </body>
</html>

运行效果为：

（2）Child Selector ("parent > child")

选择所有指定“parent”元素中指定的”child”的直接子元素。

作为一个 CSS 选择器，这个子元素组合器被 Safari, Firefox, Opera, Chrome, 和 Internet Explorer 7 及以上版本等现代浏览器支持，但尤其不被 Internet Explorer6 及以下版本支持。然而在 jQuery 中，这个选择器（与其他所有选择器）能在所有支持的浏览器中工作，包括 IE6。

这个子元素组合器(E > F)和(E F)都作为后代组合，但是他们有所不同，更具体的是(E > F)它只会选择第一级的后代。

注：选择的是子元素，注意跟后代元素的区别。

例子：

选择类名为 demo 的子元素 a，并设置字体大小。（此时只有第一个 a 元素的字体会改变）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div class="demo">
      <a href="https://www.lanqiao.cn/">shiyanlou</a>
      <div class="innerDemo">
        <a href="https://www.lanqiao.cn/">SHIYANLOU</a>
      </div>
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        $(".demo>a").css({
          "font-size": "30px",
        });
      });
    </script>
  </body>
</html>

运行效果为：

（3）Next Adjacent Selector ("prev + next")

prev 和 next 是两个同级别的元素，选中在 prev 元素后面的 next 元素。

例子：

选中 class 为 demo 后面的 a 元素，并设置字体大小。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div class="demo">
      <div class="demo">shiyanlou</div>
      <a href="https://www.lanqiao.cn/">SHIYANLOU</a>
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        $(".demo+a").css({
          "font-size": "30px",
        });
      });
    </script>
  </body>
</html>

运行效果为：

（4）Next Siblings Selector ("prev ~ siblings")

匹配 “prev” 元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。

prev + next 和 prev ~ siblings 之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素，后者扩展了该达到跟随其的所有同级元素。

例子：

选中 class 为 demo 的 div 元素后面的所有 a 同辈元素，并设置字体大小。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div class="demo">demo</div>
    <a href="https://www.lanqiao.cn/">shiyanlou</a>
    <a href="https://www.lanqiao.cn/">SHIYANLOU</a>
    <script type="text/javascript">
      $(document).ready(function () {
        $(".demo~a").css({
          "font-size": "30px",
        });
      });
    </script>
  </body>
</html>

运行效果为：

在层次选择器中，第 1 个和第 2 个选择器比较常用，而后面两个因为在 jQuery 里面可以用更加简单的方法来代替，所以使用的几率相对会少些：

• 可以使用 next() 方法来代替 %20%E9%80%89%E6%8B%A9%E5%99%A8%E3%80%82%E6%AF%94%E5%A6%82%20%60#card=math&code=%28%27prev%2Bnext%27%29%20%E9%80%89%E6%8B%A9%E5%99%A8%E3%80%82%E6%AF%94%E5%A6%82%20%60)(“.one + div);和$(“.one”).next(“div”);` 是等价的。
• 可以使用 nextAll() 方法来代替 %20%E9%80%89%E6%8B%A9%E5%99%A8%E3%80%82%E6%AF%94%E5%A6%82%20%60#card=math&code=%28%27prevsiblings%27%29%20%E9%80%89%E6%8B%A9%E5%99%A8%E3%80%82%E6%AF%94%E5%A6%82%20%60)(“#prevdiv”);和$(“#prev”).nextAll(“div”);` 是等价的。

简单提一下后面要讲解的 siblings() 方法，$("#prev~div"); 选择器只能选择 “prev” 元素后面的同辈 div 元素，而 siblings() 方法与前后位置无关，只要是同辈节点都能匹配。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
    </head>
    <body>
        <div id="">
        </div>
        <div id="prev">
        </div>
        <div id="">
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                //选取#prev之后的所有同辈div元素
                $("#prev~div").css("background", "#bbffaa");
                //同上
                $("#prev").nextAll("div").css("background", "#bbffaa");
                //选取#prev所有的同辈div元素，无论前后位置
                $("#prev").siblings("div").css({
                    "width": "100px",
                    "height": "100px",
                    "border": "1px solid red"
                })
            });
        </script>
    </body>
</html>

运行效果为：

五、表单选择器

为了使用户能够更加灵活的操作表单，jQuery 中专门加入了表单选择器，利用这个选择器，我们能够特别方便的获取到表单的某个或某类型的元素。

• :input 选取所有的 、和 元素。
• :text 选取所有的单行文本框。
• :password 选取所有的密码框
• :radio 选取所有的单选框
• :checkbox 选取所有的多选框
• :submit 选取所有的提交按钮
• :image 选取所有的图像
• :reset 选取所有的重置按钮
• :button 选取所有的按钮
• :file 选取所有的上传域
• :hidden 选取所有不可见元素

示例：选取所有的 input 元素，并设置高度。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <input text="text" />
    <input text="textaera" />
    <script type="text/javascript">
      $(document).ready(function () {
        $(":input").css({
          height: "300px",
        });
      });
    </script>
  </body>
</html>

运行效果为：

另外需要注意的是 $("#form1 :input") 与 $("#form1 input") 的区别，这里就不过多的说明，大家可以先看自己的理解，然后写个测试页面验证一下。

如果想要获得表单内单行文本框的个数，可以这么写：

//假定已经有一个id名为form1的表单
$("#form1 :text").lenth;

同理，其他的表单选择器的操作与此类似大家可以自行尝试着去写一写体验一番。更多例子可以访问 jQuery 中文官网表单。

六、 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需要的 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同，即选择器都以一个冒号 : 开头，按照不同的过滤规则，过滤选择器可以分为：

• 基本过滤选择器
• 内容过滤选择器
• 可见性过滤选择器
• 属性过滤选择器
• 子元素过滤选择器
• 表单对象属性过滤选择器

（1）基本过滤选择器

• :animated Selector 选择所有正在执行动画效果的元素.
• :eq() Selector 在匹配的集合中选择索引值为 index 的元素。
• :even Selector 选择索引值为偶数的元素，从 0 开始计数。 也可以查看 odd.
• :first Selector 选择第一个匹配的元素。
• :focus Selector 选择当前获取焦点的元素。
• :gt() Selector 选择匹配集合中所有大于给定 index（索引值）的元素。
• :header Selector 选择所有标题元素，像 h1, h2, h3 等.
• :lang() Selector 选择指定语言的所有元素。
• :last Selector 选择最后一个匹配的元素。
• :lt() Selector 选择匹配集合中所有索引值小于给定 index 参数的元素。
• :not() Selector 选择所有元素去除不匹配给定的选择器的元素。
• :odd Selector 选择索引值为奇数元素，从 0 开始计数。同样查看偶数 even.
• :root Selector 选择该文档的根元素。
• :target Selector 选择由文档 URI 的格式化识别码表示的目标元素。

示例：选取所有的 input 元素中的第一个 input 元素，并设置高度。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <input text="text" />
    <input text="textaera" />
    <script type="text/javascript">
      $(document).ready(function () {
        $("input:first").css({
          height: "300px",
        });
      });
    </script>
  </body>
</html>

运行效果为：

想要了解更多基本过滤选择器的实例可以访问jQuery 中文官网基础过滤。

（2）内容过滤选择器

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

• :contains() Selector 选择所有包含指定文本的元素。
• :empty Selector 选择所有没有子元素的元素（包括文本节点）。
• :has() Selector 选择元素其中至少包含指定选择器匹配的一个种元素。
• :parent Selector 选择所有含有子元素或者文本的父级元素。

示例：选取包含文本“shiyanlou”的 div 元素，并设置字体大小。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div>demo</div>
    <div>shiyanlou</div>
    <script type="text/javascript">
      $(document).ready(function () {
        $("div:contains('shiyanlou')").css({
          "font-size": "30px",
        });
      });
    </script>
  </body>
</html>

运行效果为：

想要了解更多内容过滤选择器的实例可以访问jQuery 中文官网内容过滤。

（3）可见性过滤选择器

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

• :hidden Selector 选择所有隐藏的元素。
• :visible Selector 选择所有可见的元素。

示例：选取所有可见的 div 元素，并设置字体大小。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div>demo</div>
    <div>shiyanlou</div>
    <script type="text/javascript">
      $(document).ready(function () {
        $("div:visible").css({ "font-size": "30px" });
      });
    </script>
  </body>
</html>

运行效果为：

注意：在可见性选择器中，需要特别注意的是选择器 :hidden,它不仅包括样式属性 display 为 “none” 的元素，也包括文本隐藏域（）和 visibility:hidden; 之类的元素。

想要了解更多可见性过滤选择器的实例可以访问jQuery 中文官网可见性过滤。

（4）属性过滤选择器

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

• Attribute Contains Prefix Selector [name|="value"] 选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。
• Attribute Contains Selector [name*="value"] 选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
• Attribute Contains Word Selector [name~="value"] 选择指定属性用空格分隔的值中包含一个给定值的元素。
• Attribute Ends With Selector [name$="value"] 选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。
• Attribute Equals Selector [name="value"] 选择指定属性是给定值的元素。
• Attribute Not Equal Selector [name!="value"] 选择不存在指定属性，或者指定的属性值不等于给定值的元素。
• Attribute Starts With Selector [name^="value"] 选择指定属性是以给定字符串开始的元素
• Has Attribute Selector [name] 选择所有具有指定属性的元素，该属性可以是任何值。
• Multiple Attribute Selector [name="value"][name2="value2"] 选择匹配所有指定的属性筛选器的元素

示例：选取拥有 class 属性的 div 元素，并设置字体大小。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div>demo</div>
    <div class="shiyanlou">shiyanlou</div>
    <script type="text/javascript">
      $(document).ready(function () {
        $("div[class]").css({
          "font-size": "30px",
        });
      });
    </script>
  </body>
</html>

运行效果为：

想要了解更多属性过滤选择器的实例可以访问jQuery 中文官网属性过滤。

（5）子元素过滤选择器

• :first-child Selector 选择所有父级元素下的第一个子元素。
• :first-of-type Selector 选择所有相同的元素名称的第一个兄弟元素。
• :last-child Selector 选择所有父级元素下的最后一个子元素。
• :last-of-type Selector 选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
• :nth-child() Selector 选择的他们所有父元素的第 n 个子元素。
• :nth-last-child() Selector 选择所有他们父元素的第 n 个子元素。计数从最后一个元素开始到第一个。
• :nth-last-of-type() Selector 选择的所有他们的父级元素的第 n 个子元素，计数从最后一个元素到第一个。
• :nth-of-type() Selector 选择同属于一个父元素之下，并且标签名相同的子元素中的第 n 个。
• :only-child Selector 如果某个元素是其父元素的唯一子元素，那么它就会被选中。
• :only-of-type Selector 选择所有没有兄弟元素，且具有相同的元素名称的元素。

示例：选取类名为 demo 的元素的第一个子 div 元素，并设置字体大小。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div class="demo">
      <div>shiyanlou</div>
      <div>SHIYANLOU</div>
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        $(".demo div:first-child").css({
          "font-size": "30px",
        });
      });
    </script>
  </body>
</html>

运行效果为：

想要了解更多子元素过滤选择器的实例可以访问jQuery 中文官网子元素过滤。

（6）表单对象属性过滤选择器

• :enabled Selector 选择所有可用的（注：未被禁用的元素）元素。
• :disabled Selector 选择所有被禁用的元素。
• :checked Selector 匹配所有勾选的元素。
• :selected Selector 获取 select 元素中所有被选中的元素。

示例：选择被选中元素，并设置宽度。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <div class="demo">
      <input type="checkbox" checked="checked" />
      <input type="checkbox" />
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        $("input:checked").css({
          width: "300px",
        });
      });
    </script>
  </body>
</html>

运行效果为：

注：特别需要注意的是选择器中的空格是不容忽视的，多一个空格或者少一个空格也许得到的结果就截然不同了，比如 $('.test :hidden'); 带空格的是后代选择器，表示选取 class 为 test 的元素里面的隐藏元素，而 $('.test:hidden'); 不带空格的是过滤选择器，表示选取隐藏的 class 为 test 的元素。

七、总结

本节实验我们主要学习了 jQuery 选择器的内容，包含以下知识点：

• jQuery 选择器是什么
• jQuery 选择器的优势

Query 中的 DOM 操作

一、实验介绍

1.1 实验内容

本节实验将带领大家学习 jQuery 中的 DOM 操作。

1.2 实验知识点

• DOM 介绍
• 查找节点
• 创建节点
• 插入节点
• 删除节点
• 复制节点
• 替换节点
• 包裹节点
• 属性操作
• 样式操作
• 设置和获取 HTML、文本和值
• 遍历节点
• CSS-DOM 操作

1.3 实验环境

• Theia: 一款前后端分离的、基于 web 的 云 IDE。
• Preview 或 Mini Browser：浏览器，右键点击目标 html 文件，选择 open with 下的 Preview 或 Mini Browser 即可在 IDE 中打开浏览器。

1.4 参考链接

• jQuery 中文网

二、jQuery 中的 DOM 操作

下面我们来介绍一下 jQuery 中的 DOM 操作。

2.1 DOM 介绍

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。DOM 定义了访问 HTML 和 XML 文档的标准。DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作。下面我们来看一下 W3C 上的 dom 树：

2.2 查找节点

使用 jQuery 在文档树上查找节点非常容易，我们可以通过第二个实验所学的 jQuery 选择器来完成。

（1）查找元素节点

var $li = $("ol li:eq(0)"); //获取<ol>里第一个<li>节点
var li_txt = $li.text(); //获取第一个<li>元素节点的文本内容
alert(li_txt); //打印文本内容

（2）查找属性节点

利用 jQuery 选择器查找到需要的元素之后，就可以使用 attr() 方法来获取它的各种属性的值。attr() 方法的参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字，比如：

var $para = $("p"); //获取<p>节点
var p_txt = $para.attr("title"); //获取<p>元素节点属性title
alert(p_txt); //打印title属性值

注：下面属性操作的部分会具体讲解 attr()方法。

2.3 创建节点

（1）创建元素节点

创建元素节点可以用 $(html) 函数。$(html) 方法会根据传入的 HTML 标记字符串，创建一个 DOM 对象，并将这个 DOM 对象包装成一个 jQuery 对象后返回。首先创建一个 li 元素如下所示：

var $li = $("<li></li>"); //创建一个<li>元素

当然上面只是创建出来了，要使用的话，还需要使用 append() 等方法将该元素插入文档中（下面会讲插入节点）。

（2）创建文本节点

创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用 append() 等方法将它们添加到文档中就可以了，例如：

var $li = $("<li>syl</li>"); //创建一个<li>元素,包括元素节点和文本节点，“syl”就是创建的文本节点

（3）创建属性节点

创建属性节点和创建文本节点类似，也是直接在创建元素节点时一起创建，比如：

var $li = $("<li title='syl'>syl</li>"); //创建一个<li>元素,包括元素节点和文本节点和属性节点，“syl”就是创建的文本节点,title='syl' 就是创建的属性节点

示例：将新建的 li 元素插入到 ul 中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <ul>
      <li>blue</li>
      <li>white</li>
      <li>red</li>
    </ul>
    <script type="text/javascript">
      $(document).ready(function () {
        var li_obj = $("<li>黄色</li>");
        $("ul").append(li_obj);
      });
    </script>
  </body>
</html>

运行效果为：

2.4 插入节点

(1) DOM 插入现有元素内:

• .append() 在每个匹配元素里面的末尾处插入参数内容。
• .appendTo() 将匹配的元素插入到目标元素的最后面。
• .html() 获取集合中第一个匹配元素的 HTML 内容 设置每一个匹配元素的 html 内容。
• .prepend() 将参数内容插入到每个匹配元素的前面（元素内部）。
• .prependTo() 将所有元素插入到目标前面（元素内）。
• .text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。

(2) DOM 插入现有元素外:

• .after() 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
• .before() 根据参数设定，在匹配元素的前面插入内容。
• .insertAfter() 在目标元素后面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。
• .insertBefore() 在目标元素前面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。

注：这些插入节点的方法不仅能将新创建的 DOM 元素插入到文档中，也能对原有的 DOM 元素进行移动。

插入节点示例：将新建的 li 元素插入到 ul 中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <ul>
      <li>blue</li>
      <li>white</li>
      <li>red</li>
    </ul>
    <script type="text/javascript">
      $(document).ready(function () {
        $("<li>yellow</li>").appendTo("ul");
      });
    </script>
  </body>
</html>

运行效果为：

移动节点示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <ul>
      <li>blue</li>
      <li>white</li>
      <li>red</li>
      <h1>I like</h1>
    </ul>
    <script type="text/javascript">
      $(document).ready(function () {
        var $li = $("ul li:eq(1)"); //获取<ul>节点中的第2个<li>元素节点
        var $h1 = $("h1"); //获取<h1>节点
        $h1.insertBefore($li); //移动节点
      });
    </script>
  </body>
</html>

运行效果为：

想要查看更多关于插入节点的实例，可以访问 jQuery 中文官网 DOM 插入现有元素内 和 jQuery 中文官网 DOM 插入现有元素外

2.5 删除节点

如果文档中某一个元素多余，那么我们可以使用 jQuery 中的 remove(),detach() 和 empty() 方法删除节点。

（1）detach() 方法

从 DOM 中去掉所有匹配的元素。.detach() 方法和 .remove() 一样, 除了 .detach() 保存所有 jQuery 数据而且和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入 DOM 时，这种方法很有用。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <ul>
      <li>blue</li>
      <li title="syl">white</li>
      <li>red</li>
    </ul>
    <script type="text/javascript">
      $(document).ready(function () {
        $("ul li").click(function () {
          alert($(this).html());
        });
        var $li = $("ul li:eq(1)").detach(); //删除元素
        $li.appendTo("ul"); //重新追加此元素,发现它之前绑定的事件还在,如果使用remove()方法删除元素的话,那么它之前绑定的事件将失效
      });
    </script>
  </body>
</html>

运行效果为：

（2）empty() 方法

从 DOM 中移除集合中匹配元素的所有子节点。这个方法不接受任何参数。这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <ul>
      <li>blue</li>
      <li title="syl">white</li>
      <li>red</li>
    </ul>
    <script type="text/javascript">
      $(document).ready(function () {
        $("ul li:eq(1)").empty(); //获取第二个<li>元素节点后,清除此元素里的内容,注意是元素里
      });
    </script>
  </body>
</html>

注：如果你想删除元素，不破坏他们的数据或事件处理程序（这些绑定的信息还可以在之后被重新添加回来），请使用 .detach()。

（3）remove() 方法

将匹配元素集合从 DOM 中删除。（注：同时移除元素上的事件及 jQuery 数据。）和 .empty() 相似。.remove() 将元素移出 DOM。 当我们想将元素自身移除时我们用 .remove()，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的 jQuery 数据。在要删除元素同时保留数据和事件的情况下，使用 .detach() 来代替。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <ul>
      <li>blue</li>
      <li>white</li>
      <li>red</li>
    </ul>
    <script type="text/javascript">
      $(document).ready(function () {
        var $li = $("ul li:eq(1)").remove(); //获取<ul>节点中的第2个<li>元素节点后,将它从网页中删除
        $li.appendTo("ul"); //把刚才删除的节点又重新添加到 <ul> 元素里
        //可以直接使用 appendTo() 方法来简化上面的代码
        //appendTo() 方法也可以用来移动元素,移动元素时首先将文档上删除此元素,然后讲该元素插入得到文档中的指定节点
        //$("ul li:eq(1)").appendTo("ul");
      });
    </script>
  </body>
</html>

运行效果为：

从运行效果来看也验证了我们所说的元素用 remove() 方法删除后，还是可以继续使用的。

另外 remove() 方法也可以通过传递参数来选择性的删除元素。比如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <ul>
      <li>blue</li>
      <li title="syl">white</li>
      <li>red</li>
    </ul>
    <script type="text/javascript">
      $(document).ready(function () {
        $("ul li").remove("li[title!=syl]"); //将<li>元素中属性title不等于'syl'的<li>元素删除
      });
    </script>
  </body>
</html>

运行效果为：

想要了解更多关于删除节点的例子，可以访问 jQuery 中文官网 DOM 移除。

2.6 复制节点

复制节点可以通过 clone() 方法来实现， 当 clone() 中传递了参数 true 时，代表复制元素的同时复制其所绑定的元素。

示例：点击 li 元素即可复制其本身到 ul 中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <ul>
      <li>blue</li>
      <li title="syl">white</li>
      <li>red</li>
    </ul>
    <script type="text/javascript">
      $(document).ready(function () {
        $("ul li").on("click", function () {
          $(this).clone().appendTo("ul");
        });
      });
    </script>
  </body>
</html>

运行效果为：

想要了解更多关于复制节点的操作，可以访问 jQuery 中文官网 复制元素。

2.7 替换节点

• .replaceAll() 用集合的匹配元素替换每个目标元素。
• .replaceWith() 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

注：.replaceAll() 和 .replaceWith() 功能一样，但是目标和源相反。

示例：替换 p 元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <p>shiyanlou</p>
    <script type="text/javascript">
      $(document).ready(function () {
        $("p").replaceWith("<p>SHIYANLOU</p>");
        //注释代码与上面的代码作用一样
        // $("<p>SHIYANLOU</p>").replaceAll("p");
      });
    </script>
  </body>
</html>

运行效果为：

想要了解更多关于替换节点的例子，可以访问 jQuery 中文官网 DOM 替换。

2.8 包裹节点

（1） wrap() 方法

每个匹配的元素外层包上一个 html 元素。.wrap() 函数可以接受任何字符串或对象，可以传递给 $() 工厂函数来指定一个 DOM 结构。这种结构可以嵌套了好几层深，但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法

例子：

用一个有边框的 DIV 将 P 元素包裹起来

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <p>shiyanlou</p>
    <p>shiyanlou</p>
    <script type="text/javascript">
      $(document).ready(function () {
        $("p").wrap("<div style='border:1px red solid;'></div>");
      });
    </script>
  </body>
</html>

运行效果为：

（2）wrapAll() 方法

在所有匹配元素外面包一层 HTML 结构。.wrapAll() 函数可以接受任何字符串或对象，可以传递给 \$() 工厂函数来指定一个 DOM 结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。

注：该元素会将所有匹配的元素用一个元素来包裹，它不同于 wrap() 方法，wrap() 方法是将所有的元素进行单独的包裹。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <p>shiyanlou</p>
    <p>shiyanlou</p>
    <script type="text/javascript">
      $(document).ready(function () {
        $("p").wrapAll("<div style='border:1px red solid;'></div>");
      });
    </script>
  </body>
</html>

运行效果为：

（3）wrapInner() 方法

在匹配元素里的内容外包一层结构。.wrapInner() 函数可以接受任何字符串或对象，可以传递给 $() 工厂函数来指定一个 DOM 结构。这种结构可以嵌套多层，但是最内层只能有一个元素。每个匹配元素的内容都会被这种结构包裹。wrapInner() 方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <p>shiyanlou</p>
    <p>shiyanlou</p>
    <script type="text/javascript">
      $(document).ready(function () {
        $("p").wrapInner("<div style='border:1px red solid;'></div>");
      });
    </script>
  </body>
</html>

运行效果为：

想要了解更多关于包裹节点的实例，可以访问 jQuery 中文官网 DOM 插入并包裹现有内容。

2.9 属性操作

在 jQuery 中， attr() 方法用来获取和设置元素的属性，removeAttr() 方法用来删除元素属性。

（1）获取元素属性

如果要获取元素的属性，那么只需要给 attr() 方法传递一个参数，即属性名称。

示例：获取 P 元素的 class 属性值，并追加到 div 中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <p class="shiyanlou-class">shiyanlou</p>
    <div></div>
    <script type="text/javascript">
      $(document).ready(function () {
        var p_class = $("p").attr("class");
        $("div").append(p_class);
      });
    </script>
  </body>
</html>

运行效果为：

（2）设置元素属性

如果需要设置元素的属性值，也可以使用 attr() 方法，不同的是，需要传递两个参数即属性名称和对应的值。

示例：设置 div 的 class 值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style type="text/css">
      .demo {
        border: 1px solid red;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>shiyanlou</div>
    <script type="text/javascript">
      $(document).ready(function () {
        $("div").attr("class", "demo");
      });
    </script>
  </body>
</html>

运行效果为：

如果需要一次性为同一个元素设置多个元素，可以使用下面的代码来实现：

$("div").attr({ class: "demo", name: "test" }); //将一个 “名/值” 形式的对象设置为匹配元素的属性

（3）删除元素属性

用 removeAttr() 方法来实现删除元素属性。.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。

示例：删除 div 的 class

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style type="text/css">
      .demo {
        border: 1px solid red;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="demo">shiyanlou</div>
    <script type="text/javascript">
      $(document).ready(function () {
        $("div").removeAttr("class");
      });
    </script>
  </body>
</html>