jQuery2-秘籍-一-

布客飞龙
89 阅读33分钟

jQuery2 秘籍（一）

原文：jQuery 2 Recipes

协议：CC BY-NC-SA 4.0

一、JQuery 基础知识

在这一章中，我们将讨论 jQuery 的基础知识，比如选择元素、应用样式等等。我们将在本章中介绍以下食谱:

  • 在网页上包含 jQuery 库

  • 在处理之前准备好文档

  • 将样式应用于包装集

  • 将样式应用于特定段落

  • 对特定类别的段落进行计数并对其应用样式

  • 返回到先前的选择

  • 移除 DOM(文档对象模型)并预先计划和追加元素

  • 应用链接以便对选定的列表元素应用样式

  • 使用一个for循环来显示一个无序列表的柠檬

  • 替换 DOM 元素

  • 替换文本和 HTML

  • 克隆 DOM

  • 显示兄弟姐妹

  • 设置和获取属性

  • 计算 DOM 中节点的数量并显示它们的文本

  • 获取元素的 HTML

  • 将相同的类名分配给不同的 HTML

在开始之前，让我们快速回顾一些 JQuery 基础知识。

1.1 什么是 jQuery？

jQuery 是一个轻量级的跨平台 JavaScript 库。由于其易于使用的语法，jQuery 使得在任何网站上包含 JavaScript 变得非常容易。它不仅简化了复杂的编码，而且减少了代码的大小。

以下是 jQuery 的一些特性:

  • jQuery 是一个开放源码项目，根据 MIT 许可证授权，允许在任何网站上免费使用，如果需要，可以根据 GNU 公共许可证重新授权，以包含在其他 GNU 授权的开放源码项目中。

  • 它有一个庞大的用户和贡献者社区，每天都在使它变得更好。它的社区发布了大量关于 bug 修复和增强的帖子。

  • 它有大量的插件，使你能够添加功能到你的网页，并开发与不同平台兼容的应用。

  • 它的 API 是完全文档化的，使得它易于使用和访问它的全部特性。

  • 它支持大多数 CSS3 选择器。此外，jQuery 具有强大的 DOM 交互和操作方法。也就是说，jQuery 提供了几个方法，使得选择所需的 DOM 以及迭代和遍历 DOM 变得非常容易。

  • 它的学习曲线很浅。因为它使用了 CSS 和 HTML，所以学习它的概念非常容易。

  • 它针对大多数现代浏览器进行了优化，包括 Chrome、Internet Explorer、Opera、Firefox 和 Safari。

  • jQuery 中的编码大大减少了，因为它支持链式方法调用。链式方法调用意味着一个接一个地调用方法，一个方法的结果作为输入提供给另一个方法，因此减少了大量语句。

要使用 jQuery，不需要安装。直接从官网下载 jQuery， http://jquery.com/ ，里面有几个版本的 jQuery。可以下载最稳定的版本。

将 jQuery 下载到本地文件系统后，只需使用 HTML <script>元素引用文件的位置。此外，jQuery 可以通过内容交付网络(cdn)免费获得。许多公司，如 Google 和 Microsoft，在分布在世界各地的强大、低延迟的服务器上提供 jQuery 文件，以便快速访问。由于服务器分布和缓存，CDN 托管的 jQuery 副本访问起来相当快，但是如果您无法访问互联网，您可以随时下载 jQuery 副本并从本地磁盘访问它。

在本书中，我们将非常频繁地使用两个术语， DOM 和选择器。所以，在我们开始第一个食谱之前，让我们先了解它们。

1.2 了解 DOM

DOM 将 HTML 元素表示为一个对象网络，就像页面上的元素树。以下示例将帮助您理解元素树在网页上的存在方式:

<html>
      <head>
           <title>web page title</title>
      </head>
      <body>
           <ul>
                 <li>First list item</li>
                <li>Second list item</li>
                <li>Third list item</li>
         </ul>
      </body>
</html>

这里，<html>是网页上所有元素的祖先或父元素。即所有元素都是<html>的后代或子代。<head>和<body>元素是<html>的后代或子代。<li>元素是<ul>的子元素或子元素。<ul>元素是所有<li>元素的父元素，所有<li>元素是彼此的兄弟元素。

1.3 选择器

顾名思义，jQuery 选择器有助于根据 id、名称、类型、属性、类等在 HTML 文档中找到 DOM 元素。jQuery 选择器返回元素或元素列表。

选择器的类型

可以使用不同的元素属性(如类型、类、id、属性或索引位置)来选择网页上的元素，如下所示:

  • **类型:**下面的 jQuery 选择器将选择所有的<p>元素:

$("p")

$("*")将选择所有元素。

  • Class: 下面的 jQuery 选择器将选择名为info的类的所有元素。

$(".info")

$(".info,.features")将选择类别为info或features的所有元素。

  • ID: 下面的 jQuery 选择器将选择 ID 为ElectronicsProducts的元素:

$("#ElectronicsProducts")

  • **属性:**下面的 jQuery 选择器将选择定义了href属性的所有元素:

$("[href]")

  • **索引位置:**下面的 jQuery 选择器将选择第二个<p>元素。像所有编程语言一样，索引是从 0 开始的，所以第一个元素被认为是在索引 0 处，第二个元素是在索引 1 处，依此类推。

$("p:eq(1)")

1.4 1-1.在网页中包含 jQuery 库

问题

您希望在 web 页面中使用 jQuery JavaScript 库。

解决办法

考虑下面的 HTML 文件，您希望在其中使用 jQuery 库:

selectprg.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>First jQuery Example</title>
<link rel="stylesheet" href="selectprgstyle.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="selectprgjq.js" type="text/javascript"></script>
   </head>
   <body>
.....
   </body>
</html>

要包含 jQuery JavaScript 库，您需要使用 HTML <script>元素，并在 jQuery 文件的src属性中提供 URL 或目录路径。

在网页中嵌入 jQuery 库有两种方式:

  • 使用任何托管内容交付网络将 jQuery 包含在网页中。

  • 从jQuery.com下载 jQuery，并在文件系统的网页中使用它。

为了使用 Google 托管的 CDN，请在 HTML 页面中使用以下语句:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

在上面的 HTML 文件中，selectprgstyle.css被假定为级联样式表文件，selectprgjq.js被假定为包含要在网页上应用的 jQuery 代码的文件。

它是如何工作的

HTML <script>元素将通过其在当前网页中的src=""属性链接在指定 URL 上提供的 jQuery 库。使用 Google 托管版本的 jQuery 的好处是，您可以获得一个稳定、可靠、无错误、全球可用的 jQuery 副本。

如果您无法访问互联网并且不想使用 Google 托管的 jQuery 代码副本，您可以随时从jQuery.com下载 jQuery 并将其托管在您的本地文件系统中，并用 jQuery 文件位置的目录路径替换src属性值。以下脚本标记包括本地文件系统中的 jQuery 库:

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

1.5 1-2.在处理之前准备好文档

问题

在遍历或操作 DOM 之前，必须确保 DOM 在被操作之前被加载。不仅仅是 DOM 您希望确保在应用 jQuery 代码之前加载图像和其他文件。

解决办法

当 JavaScript 代码出现在浏览器中并且正在处理标题时，它会立即运行。因此，您需要延迟代码的执行，直到 DOM 可以应用处理。换句话说，您需要延迟 jQuery 函数的执行，直到 DOM“准备好”被处理。使用$(document).ready()方法，jQuery 会推迟函数调用，直到 DOM 加载完毕

一旦 DOM 准备就绪，jQuery 将执行回调函数，该函数执行以下任务:

  • 使用所需的选择器访问元素。选择器返回匹配的元素。

  • 操作选定的元素或对其应用所需的任务。

下面是 jQuery 代码，它演示了在对文档执行任何 jQuery 代码之前，如何等待文档准备就绪:

$(document).ready(function() {
..................
..................
})

它是如何工作的

更准确地说，ready()方法指定了当 DOM 完全加载时要执行的函数。function关键字不带函数名，函数体包含要应用于 DOM 的代码。函数体也作为参数传递给ready方法，因为您希望函数立即执行，但只执行一次。

1.6 1-3.将样式应用于包装集

问题

您需要获得 jQuery 包装器集并应用样式。当您从 HTML 页面中选择某些 DOM 元素时，它们被包装了 jQuery 功能。对于这个包装器集，您希望应用不同的 jQuery 函数和属性。我们来看看是怎么做的。

解决办法

这是一个 HTML 文件，包含几个段落元素和一个标题 1 元素。使用标题级别 1 显示文本欢迎来到我们的网站。三个<p>元素用于显示特定文本。

Wrapperpage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery Wrapper Set</title>
<link rel="stylesheet" href="wrapperstyle.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="wrapperjq.js" type="text/javascript"></script>
  </head>
  <body>
    <H1>Welcome to our site </H1>
<p> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
<p> We do provide home delivery also </p>
<p> Best products and very reasonable prices </p>
  </body>
</html>

您希望对 HTML 文件的所有段落元素应用某种样式。创建了wrapperstyle.css文件，并在其中创建了一个样式，如图所示。

Wrapperstyle.css

.highlight{
       font-style: italic;
       background-color: #0f0;
}

在上面的 CSS 样式表文件中，创建了一个名为highlight的 CSS 样式类，将字体样式改为斜体，背景颜色改为绿色。

为了将 CSS 文件中定义的名为highlight的样式应用于 HTML 页面的段落元素，在wrapperjq.js文件中编写了以下 jQuery 代码:

Wrapperjq.js

$(document).ready(function() {
           $('p').addClass('highlight');
})

它是如何工作的

为了选择想要的 DOM，您需要使用 jQuery 中的选择器 API。要使用选择器 API，只需编写一个名为$(美元符号)的对象。美元符号也可以用字符串"jQuery"代替。事实上，$变量包含了整个 jQuery 框架，并且是开始 jQuery 编码所必需的。$变量有几个成员属性和方法，可以调用它们来选择所需的 DOM。简而言之，$变量是 jQuery 函数和名称空间的别名。$()函数通常将一个字符串作为参数，这个参数可以是一个 CSS 选择器，它返回一个新的 jQuery 对象实例，这个实例可能包含零个或多个 DOM 元素，可以对这些元素应用所需的处理。

jQuery 将扫描整个 HTML 页面，并将所有的<p>元素放在包装器集中，这样 jQuery 方法就可以应用于它们。隐式迭代是自动应用的，因此观察包装器集中的每个 DOM 元素，并将指定的高亮类应用于包装器集中的每个段落元素。addClass方法应用于页面上的每个<p>元素，没有使用任何循环，这意味着隐式迭代应用于包装器集合中的所有元素。

运行 HTML 文件时，您会看到 H1 标题级别显示了最高标题级别的文本。同样，在应用名为highlight的 CSS 类时，三个段落的文本将以斜体显示，背景颜色为绿色，如图 1-1 所示。

img/192218_2_En_1_Fig1_HTML.jpg

图 1-1

将样式应用到

元素

1.7 1-4.将样式应用于特定段落

问题

您有一个 HTML 文件，您想根据段落的位置来选择段落，并对其应用样式。

解决办法

考虑下面的 HTML 文件，它包含一个标题级别 1 元素和三个段落:

selectprg.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery Examples</title>
    <link rel="stylesheet" href="selectprgstyle.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="selectprgjq.js" type="text/javascript"></script>
   </head>
   <body>
          <H1>Welcome to our site </H1>
             <p> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
             <p> We do provide home delivery also </p>
            <p> Best products and very reasonable prices </p>
   </body>
</html>

在这个 HTML 文件中，文本Welcome to we site显示在标题级别 1 中，三个段落元素用于显示某些文本。

selectprgstyle.css

.highlight1{
        font-style: italic;
        background-color: #0f0;
}
.highlight2{
        font-style: bold;
        background-color: #f00;
}

这个样式表文件中出现了两个 CSS 样式，highlight1和highlight2。highlight1样式包含使文本以斜体显示并将背景改为绿色的代码。highlight2样式包含使文本以粗体显示并将背景颜色改为红色的代码。

selectprgjq.js

$(document).ready(function() {
      $('p:even').addClass('highlight1');
          $('p:eq(1)').addClass('highlight2');
})

上面的 jQuery 代码中，使用了addClass()方法，我们来看看这个方法。

addClass()方法

.addClass()方法将一个 CSS 类应用到选中的 DOM 元素。

语法

$(selector).addClass(class_name)

其中class_name参数表示要添加的类。

您可以使用.removeClass()方法从选定的 DOM 中移除指定的 CSS 类。

它是如何工作的

p:even选择器选择偶数索引位置的段落元素(即第 0、第 2、第 4 索引位置，依此类推)。请记住，几乎所有编程语言都使用基于 0 的索引，因此第 0 个索引位置的段落元素表示第一个段落，第 2 个索引位置的段落元素表示第三个段落，样式highlight1将应用于它们。

eq(1)选择器选择第一个索引位置的<p>元素，因此样式highlight2将应用于第二个段落元素。

在这段代码中，您可以找到文档中位于偶数索引位置的所有<p>元素(即位于第 0 个索引位置、第 2 个索引位置、第 4 个索引位置的<p>元素，依此类推)。类别highlight1适用于所有这些<p>元素。

注意将类添加到所有偶数索引的<p>元素不需要迭代，因为 jQuery 在其中使用了隐式迭代。

在运行 HTML 文件时，您将看到 CSS 样式highlight1应用于索引位置为 0 和 2 的段落元素，使文本以斜体模式和绿色背景色显示。此外，CSS 样式highlight2应用于索引位置为 1 的段落元素，使其文本以粗体显示，背景颜色为红色，如图 1-2 所示。

img/192218_2_En_1_Fig2_HTML.jpg

图 1-2

不同的样式应用于偶数索引位置的

元素和第一个索引位置的

元素

1.8 1-5.对特定类别的段落进行计数并对其应用样式

问题

网页中有一些段落，您想对分配了特定类的段落进行计数，并想对它们应用 CSS 样式类。

解决办法

考虑下面的 HTML 文件，它有一个标题级别 1 元素和几个段落，这些段落被分配了特定的类来区分它们:

countprg.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery Examples</title>
    <link rel="stylesheet" href="countprgstyle.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="countprgjq.js" type="text/javascript"></script>
   </head>
   <body>

        <H1>Welcome to our site </H1>
        <p class="info"> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
        <p> We do provide home delivery also </p>
        <p class="info"> Best products and very reasonable prices </p>
   </body>
</html>

您可以在上面的代码中看到，标题级别 1 中显示了一条文本消息，欢迎来到我们的网站。三个段落元素用于显示某些文本。第一个和第三个段落元素被分配了类别info。

以下是包含要应用于所选段落的样式规则的 CSS 文件:

countprgstyle.css

.highlight1{
       font-style: italic;
       background-color: #0f0;
}

CSS 文件包含名为highlight1的样式，该样式包含使文本以斜体显示并将其背景颜色设置为绿色的代码。

countprgjq.js

$(document).ready(function() {
        alert($('p').filter('.info').length+" paragraphs match the given class");
        $('p').filter('.info').addClass('highlight1');
})

它是如何工作的

方法显示一个带有指定消息的对话框。该对话框有一个“确定”按钮，在用户单击“确定”按钮之前，显示消息的对话框会一直保持在那里。换句话说，警告对话框将焦点从当前窗口移开，并迫使查看者阅读消息。alert方法显示一个对话框，显示具有类info.的段落元素的数量

.filter()方法遍历匹配的元素集(即遍历所有的<p>元素),并将筛选出具有info类的元素。也就是说，选择并返回所有具有类info的<p>元素，以便样式highlight1可以应用于它们。不具有类别info的所有<p>元素被过滤掉(即，从匹配集中移除)。

将出现警告对话框，显示与info类匹配的段落数(见图 1-3 (a))。计数 2 将通过警告对话框显示，highlight1的 CSS 样式将应用于具有info类的段落(即，第一和第三段的文本将变为斜体模式，其背景颜色将变为绿色)。参见图 1-3(b) 。

img/192218_2_En_1_Fig3_HTML.jpg

图 1-3

(a)显示具有特定样式的

元素计数的警告对话框(b)应用于 info 类的

元素的样式

1.9 1-6.返回到先前的选择

问题

您已经使用选择器选择了某个 DOM，现在您想返回到上一个 DOM 来执行某个任务。

解决办法

下面是一个 HTML 文件，它包含一个标题级别 1 元素和几个段落:

Returnpriorpage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery Examples</title>
    <link rel="stylesheet" href="returnpriorstyle.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="returnpriorjq.js" type="text/javascript"></script>
   </head>
   <body>
         <H1>Welcome to our site </H1>
         <p class="info"> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
        <p> We do provide home delivery also </p>
        <p class="info"> Best products and very reasonable prices. <a href="bmharwani.com">Click for details </a> </p>
   </body>
</html>

您可以在上面的代码中看到，标题级别 1 元素用于显示文本欢迎来到我们的网站。某些文本通过三个段落元素显示。为了在 jQuery 代码中明确地访问它们，第一段和第三段被分配了类info。

以下是包含要应用于所选段落的样式的 CSS 文件:

Returnpriorstyle.css

.highlight1{
      font-style: italic;
      background-color: #0f0;
}

highlight1样式包含使文本以斜体显示并将其背景颜色设置为绿色的代码。

以下是 jQuery 代码，用于区分需要应用 CSS 样式的段落:

Returnpriorjq.js

$(document).ready(function() {
        $('p').filter('.info').addClass('highlight1');
})

它是如何工作的

类别为info的段落元素被过滤掉(即选中并应用highlight1的 CSS 样式，使其文本以斜体和绿色背景色显示，如图 1-4 。

img/192218_2_En_1_Fig4_HTML.jpg

图 1-4

highlight1 的 CSS 样式应用于带有类信息的

元素

如果添加了end()方法，控件将返回到之前的 DOM(即所有三个段落元素):

$(document).ready(function() {
      $('p').filter('.info').end().addClass('highlight1');
})

因此，highlight1的 CSS 样式将应用于所有三个段落元素，如图 1-5 所示。

img/192218_2_En_1_Fig5_HTML.jpg

图 1-5

应用于所有三个

元素的 CSS 样式

您可以在 jQuery 代码上应用filter()和find()方法来更精确地选择段落:

$(document).ready(function() {
      $('p').filter('.info').find('a').addClass('highlight1');
})

类别为info的段落元素被过滤掉(选中)，其中的<a>元素(超链接)被搜索，CSS 样式highlight1被应用到找到的超链接。最终，只有超链接文本以斜体和绿色背景显示(见图 1-6 )。

img/192218_2_En_1_Fig6_HTML.jpg

图 1-6

应用于超链接的 CSS 样式

Note

您可以应用一个以上的end()方法来进入更多先前选择的 DOM。

1.10 1-7.移除 DOM 并预先计划和追加元素

问题

在这个菜谱中，您将学习如何删除不需要的 DOM，以及如何在 web 页面上的所需位置预先计划和添加所需的元素。

解决办法

以下是包含标题级别 1 元素和三个段落的 HTML 文件:

removingdom.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>JQuery Examples</title>
     <script src="jquery-3.5.1.js" type="text/javascript"></script>
     <script src="removingdomjq.js" type="text/javascript"></script>
   </head>
   <body>
         <H1>Welcome to our site </H1>
         <p> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
         <p> We do provide home delivery also </p>
         <p> Best products and very reasonable prices </p>
   </body>
</html>

您可以看到，在上面的代码中，文本Welcome to we site出现在标题级别 1。三个段落元素用于显示某些文本。

removingdomjq.js

$(document).ready(function() {
       $('H1').remove();
       $('p:eq(0)').prepend('<img src="a1.jpg" /></a><br/>');
       $('p:eq(2)').remove();
       $('p:eq(1)').append('<p>Festivals Offers starts</p>');
})

在上面的 jQuery 代码中，使用了一些方法:remove()、prepend()和append。我们来看看这三种方法。

移除( )

remove()方法从 DOM 中删除匹配的元素。它不仅会删除指定的元素，还会删除其中的所有元素。换句话说，匹配元素的所有子元素也被删除。

语法

$(selector).remove(selector)

其中参数selector表示要移除的一个或多个元素。如果要删除多个元素，需要用逗号(，)分隔这些元素。

前置( )

prepend()方法用于在所选元素的开头插入指定的内容。

语法:

$(selector).prepend(content_to_be_inserted)

其中,selector用于选择需要插入内容的元素，而content_to_be_inserted参数是将在通过选择器选择的 DOM 之前添加的内容。

追加( )

append()方法将指定的内容插入到所选元素的末尾。

语法:

$(selector).append(content_to_append)

其中selector帮助选择要添加内容的 DOM，而content_to_append是必须添加到所选 DOM 末尾的内容。

它是如何工作的

标题 1 元素将从网页中删除。在索引位置 0 处的段落元素之前(即，在第一个段落之前)，添加名为a1.jpg的图像。此后，插入换行符，并且从网页中移除索引位置 2 处的段落元素(即，第三段)。此外，在索引位置 1 处的段落元素之后(即，在第二段之后)，添加具有文本 Festivals Offers starts 的段落元素。运行程序后，您会得到如图 1-7 所示的输出。

img/192218_2_En_1_Fig7_HTML.jpg

图 1-7

删除 H1、添加图像、删除索引位置 2 处的

元素并添加文本后的输出

1.11 1-8.应用链接以对选定的列表元素应用样式

问题

您有一个包含几个列表项的无序列表，并且您想使用链接对所需的列表项应用某种样式。

解决办法

jQuery 中的链接使您能够用一条语句在同一个元素上运行多个 jQuery 方法。链接中使用的多个 jQuery 方法将在所选元素上一个接一个地执行。对于链接，只需在前一个动作的基础上添加另一个 jQuery 动作。

以下是显示无序列表的 HTML 文件:

chaining.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery Examples</title>
    <link rel="stylesheet" href="chainingstyle.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="chainingjq.js" type="text/javascript"></script>
  </head>
  <body>
<ul id="ElectronicsProducts">
                    <li>Cameras</li>
                    <li>Cell Phones</li>
                    <li>Laptops</li>
             </ul>
  </body>
</html>

您可以在上面的代码中看到，一个无序列表是用 idElectronicsProducts创建的，由三个列表项组成:Cameras、Cell Phones和Laptops。

若要将样式应用于选定的列表项，请将以下样式规则写入 CSS 文件:

chainingstyle.css

.highlight1{
       font-style: italic;
       background-color: #0f0;
}
.highlight2{
      font-style: bold;
      background-color: #f00;
}

样式表包含两个名为highlight1和highlight2的样式。highlight1样式包含了将文本转换成斜体并将其背景颜色改为绿色的代码。类似地，highlight2类包含将文本转换为粗体并将背景颜色改为红色的代码。

为了利用链接方法对无序列表的不同列表项应用不同的样式，编写了以下 jQuery 代码:

chainingjq.js

$(document).ready(function() {
      $('li:contains(Cell Phones)').parent().find('li:eq(0)')
      .addClass('highlight1').end().find('li:eq(2)')
      .addClass('highlight2');
});

在上面的 jQuery 代码中，使用了find()方法，所以我们来看看这个方法。

查找( )

find()方法用于查找所选元素的所有后代元素。该方法扫描所有元素，直到 DOM 中选定元素的最后一片叶子。以下是使用find()方法的两种方式:

语法:

$(selector).find()

其中selector是必须找到其所有后代元素的元素。该函数返回所有找到的派生元素。

语法:

selector.find( selector )

其中find方法左边的selector帮助选择其后代必须被扫描的元素，并且作为参数发送到 find 方法的selector用于从找到的后代中选择元素。

它是如何工作的

搜索所有列表项，查看是否有任何列表项包含字符串 Cell Phones 。如果找到该列表项，则选择其父项。在第二个列表项中找到了Cell Phones文本，并且<li>元素的父元素是<ul>元素，因此选择了一个无序列表元素，并且从其后代中选择了第 0 个索引位置处的列表项(即第一个列表项)元素(即，选择了具有文本Cameras的列表项，并且对其应用了样式highlight1)。当调用end()方法时，控制返回到父元素(即，无序列表元素)。同样，从无序列表的后代中，选择第二个索引位置处的列表项元素(即，第三个列表项)(具有文本Laptops)并对该列表项应用样式highlight2(如图 1-8 所示)。

img/192218_2_En_1_Fig8_HTML.jpg

图 1-8

highlight1 样式应用于索引位置 0 的列表项，highlight2 样式应用于第二个索引位置的列表项

1.12 1-9.使用 for 循环显示无序列表的元素

问题

您有一个某些列表项的无序列表。您希望使用一个for循环来显示无序列表的所有列表项。

解决办法

下面的 HTML 程序包含一个无序列表，其中包含几个列表项。

fordisplay.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title> </title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="fordisplayjq.js" type="text/javascript"></script>
  </head>
  <body>
<ul id="ElectronicsProducts">
                    <li>Cameras</li>
                    <li>Cell Phones</li>
                    <li>Laptops</li>
             </ul>
  </body>
</html>

您可以在上面的代码中看到，一个无序列表是用 idElectronicsProducts创建的，由三个列表项组成:Cameras、Cell Phones和Laptops。id 被分配给无序列表，以便可以在 jQuery 代码中精确地访问它。

下面是访问无序列表的列表项并显示它们的 jQuery 代码:

fordisplayjq.js

$(document).ready(function() {
       var $nodes = $('#ElectronicsProducts').children();
       alert('Number of nodes is '+$nodes.length);
       var txt="";
       for (var i = 0; i < $nodes.length; i++){
                     txt+=$('#ElectronicsProducts').find('li:eq('+i+')').text()+" ";
       }
       alert("Items in the unordered lists are "+txt);
});

上面的 jQuery 代码中使用了children()方法，我们先来看看。

儿童( )

children()方法找到所选元素的所有子元素并返回它们。该方法遍历所有子元素，直到所选元素的叶元素，并返回所有子元素。

语法:

$(selector).children()

其中selector是必须返回其子元素的元素。

它是如何工作的

id 为ElectronicsProducts的元素的所有子节点都将被访问并返回给nodes变量。无序列表的 id 为ElectronicsProducts，因此它的三个列表项将被赋给变量nodes。因为有多个列表项，所以节点将成为包含三个列表项的数组。

将显示一个警告对话框，显示子项目的数量(即列表项目的数量)，因此对话框中将显示 3(参见图 1-9(a) )。

一个字符串变量被初始化，一个for循环被设置为从索引值 0 开始执行，直到比节点数组的长度小 1。也就是说，for循环将在变量i的值从 0 到 2 的范围内运行。使用从第 0 个值到第 2 个值的for循环，访问索引位置 0 到 2 的列表项，并将它们的文本连接到字符串变量txt。前三个列表项(即Cameras、Cell Phones和Laptops)的文本被分配给txt变量。最后，三个列表项的文本通过警告对话框显示(见图 1-9(b) )。

img/192218_2_En_1_Fig9_HTML.jpg

图 1-9

(a)显示节点计数的警告对话框(b)显示所有列表项文本的警告对话框

1.13 1-10.替换 DOM 元素

问题

您在 HTML 文件中有一个段落元素，您想用一个无序列表替换它。

解决办法

下面的 HTML 程序包含三个带有特定文本的段落元素。为了区分段落，给它们分配了独特的类别。

replacedom.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery Examples</title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="replacedomjq.js" type="text/javascript"></script>
   </head>
   <body>
        <p class="features"> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
       <p class="info"> We do provide home delivery also </p>
       <p class="features"> Best products and very reasonable prices </p>
   </body>
</html>

在上面的 HTML 代码中，您可以看到某些文本是通过三个段落元素显示的。第一个和第三个段落元素被分配类别features，第二个段落元素被分配类别info。

下面是用无序列表替换段落元素的 jQuery 代码:

replacedomjq.js

$(document).ready(function() {
       $( "p.info" ).replaceWith( "<ul>We provide: <li>Free Home Delivery</li><li>Fast Delivery with Charges </li></ul>" );
});

在上面的 jQuery 代码中，使用了一个叫做replaceWith()的方法，我们来看看这个方法。

replaceWith(新内容)

此方法用所需的新内容替换选定元素集中的每个元素。参数new_content可以是 HTML 字符串、DOM 元素、数组或 jQuery 对象。记住，所选元素的内容将被删除，而new_content将被粘贴到它的位置。

它是如何工作的

第二个段落(即具有类别info的段落)由一个无序列表替换，该列表由文本We provide和两个列表项Free Home Delivery和Fast Delivery with Charges组成。因此，在第一段和第三段之间会出现一个无序列表，如图 1-10 所示。

img/192218_2_En_1_Fig10_HTML.jpg

图 1-10

被无序列表替换的

元素

1.14 1-11.替换文本和 HTML

问题

您有一个标题元素和一个段落元素，您想要替换标题元素的文本，并将 HTML 代码分配给段落元素。

解决办法

以下 HTML 文件有一个标题元素和一个段落元素:

Replacehtmltextpage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery Examples</title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="replacehtmltextjq.js" type="text/javascript"></script>
   </head>
   <body>
       <H1>Welcome to our site </H1>
       <p> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
   </body>
</html>

在上面的代码中，您可以看到一条文本消息，Welcome to we site，通过标题级别 1 显示。标题下面是显示一些文本的段落元素。

替换标题级别 1 元素的文本并为段落元素设置 HTML 的 jQuery 代码如下:

Replacehtmltextjq.js

$(document).ready(function() {
$("h1").text("Welcome to latest Innovations");
$("p").html("<b>Latest Laptops, Cameras, Mobile Phones at attractive prices available</b>");
})

它是如何工作的

标题级别 1 的文本替换为文本欢迎使用最新创新。段落元素的文本替换为 HTML < b >最新款笔记本电脑、相机、手机价格优惠< /b > 。该文本将以粗体显示，并将取代原始段落文本，如图 1-11 所示。

img/192218_2_En_1_Fig11_HTML.jpg

图 1-11

H1 的文本和

元素被替换

1.15 1-12.克隆 DOM

问题

你有 HTML 元素，你想复制它。更准确地说，您希望复制一个段落元素，并将其粘贴到所需的位置。

解决办法

下面是一个 HTML 程序，它包含显示某些文本的某些段落元素:

cloningdom.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title> </title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="cloningdomjq.js" type="text/javascript"></script>
   </head>
   <body>
      <p> We deal with electronic products like mobile phones, laptops, washing machine at very reasonable prices </p>
      <p class="info"> We do provide home delivery also </p>
      <p class="features"> Best products and very reasonable prices </p>
   </body>
</html>

您可以在上面的代码中看到，某些文本是通过三个段落元素显示的。为了通过 jQuery 代码访问它们，第二段和第三段分别被赋予了类info和features。

用于复制段落元素并将其粘贴到另一个段落之后的 jQuery 代码如下:

cloningdomjq.js

$(document).ready(function() {
$( "p.info" ).clone().appendTo("p.features");
});

它是如何工作的

clone()方法复制选定的元素，包括其子元素。顾名思义，这个方法制作了元素的精确副本，包括文本和属性。

选择类别为info的段落元素，制作其克隆体(即其副本)，并将该克隆体添加到类别为features的段落元素的末尾，如图 1-12 所示。

img/192218_2_En_1_Fig12_HTML.jpg

图 1-12

制作类信息的

元素的克隆，并附加到类特征的

元素

Note

当使用.clone()方法时，您可以在插入之前修改克隆的元素或它的外观。

让我们将样式应用到被克隆的段落元素。为此，请用以下 jQuery 脚本文件替换脚本行:

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

其中cloningdombjq.js包含以下 jQuery 代码:

$(document).ready(function() {
       $( "p.info" ).clone().appendTo("p.features").addClass('highlight1');
});

您可以看到，选择了具有类info的段落元素，并制作了它的克隆。然后用类features将克隆添加到段落元素的末尾。对克隆的段落元素应用 CSS 类highlight1。

要将样式应用于克隆的段落，请在 HTML 文件的<head>元素中添加以下语句来访问 CSS 文件:

<link rel="stylesheet" href="cloningdomstyle.css" type="text/css" media="screen" />

其中cloningdomstyle.css包含以下 CSS 样式:

.highlight1{
      font-style: italic;
      background-color: #0f0;
}
.highlight2{
      font-style: bold;
      background-color: #f00;
}

CSS 文件包含两个 CSS 类，highlight1和highlight2。您将在 jQuery 代码中使用highlight1风格。CSS 样式highlight1包含将文本转换为斜体模式并将其背景颜色改为绿色的代码。在运行程序时，你可以看到克隆的段落(即在它被添加到末尾之前的第二个图形)首先应用了 CSS 样式highlight1，如图 1-13 所示。

img/192218_2_En_1_Fig13_HTML.jpg

图 1-13

在对其应用样式后，制作并附加了一个

元素的克隆

1.16 1-13.显示兄弟姐妹

问题

某些 HTML 元素相互嵌套，您希望显示或找出某个特定 HTML 元素的兄弟元素。

解决办法

下面的 HTML 程序包含一个<div>元素和嵌套在其中的其他几个 HTML 元素:

Siblingpage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery Examples</title>
    <link rel="stylesheet" href="siblingstyle.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="siblingjq.js" type="text/javascript"></script>
  </head>
  <body>
        <div>
                <p> Electronic Products </p>
                <ul>
                        <li>Cameras</li>
                        <li>Cell Phones</li>
                        <li>Laptops</li>
                </ul>
                <H1> Snacks </H1>
                <ul>
                        <li>Pizza</li>
                        <li>Burger</li>
                </ul>
        </div>
  </body>
</html>

在上面的 HTML 程序中可以看到，制作了一个<div>元素。在<div>元素中有一个<p>元素，一个<ul>元素，一个<H1>元素，还有一个<ul>元素。两个<ul>元素有各自的<li>元素。

要将样式应用于所需 HTML 元素的兄弟元素，请在 CSS 文件中定义某些样式规则，如下所示:

Siblingstyle.css

.highlight{
      font-style: italic;
      background-color: #0f0;
}

您可以看到 CSS 文件包含一个名为highlight的样式，它将文本转换为斜体模式，并将其背景颜色更改为绿色。

以下是显示<div>元素的兄弟元素的 jQuery 代码:

Siblingjq.js

$(document).ready(function() {
      $('div').siblings();
})

它是如何工作的

如图 1-14 所示，显示<div>元素的兄弟元素(即，段落元素，由三个列表项组成的无序列表，标题级别 1 元素，以及带有两个列表项的无序列表)。

img/192218_2_En_1_Fig14_HTML.jpg

图 1-14

显示

元素的两个兄弟元素

要将highlight样式仅应用于<div>元素的特定兄弟元素(即，仅应用于无序列表)，请修改 jQuery 代码，如下所示:

$(document).ready(function() {
 $('p').siblings('ul').addClass('highlight');
})

在<div>元素的所有兄弟元素中(即在<p>, <ul>, <h1>,和<ul>元素中)，选择<ul>元素，并将highlight样式应用于两个无序列表项，将列表项的文本转换为斜体模式，并将它们的背景色更改为绿色(参见图 1-15 )。

img/192218_2_En_1_Fig15_HTML.jpg

图 1-15

突出显示样式应用于同级的无序列表元素

1.17 1-14.设置和获取属性

问题

您希望动态地设置和获取 HTML 元素的属性。在这个菜谱中，您将学习如何访问超链接的属性值，以及如何设置或更改其属性值。

解决办法

下面的 HTML 文件有两个用特定文本定义的段落元素。第二段被分配类别info，此后超链接被定义如下:

Getsetattribpage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery Examples</title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="getsetattribjq.js" type="text/javascript"></script>
   </head>
   <body>

       <p> We do provide home delivery also </p>
       <p class="info"> Best products and very reasonable prices. </p>
       <a href="http://bmharwani.com">Click for details </a>
   </body>
</html>

您将用来获取和设置 HTML 元素属性值的方法是attr()，所以现在让我们来看看attr()方法。

属性( )

attr()方法用于获取和设置 HTML 元素的属性值。当单个参数被传递给.attr()函数时，它返回所选元素上被传递属性的值。

语法:

$([selector]).attr([attribute name]);

为了给某个元素赋值，需要在属性名后面提供属性值。

语法:

attr(attributeName, attributeValue)

示例:

$('a').attr('title', 'Click for  details');

标题attribute有助于将文本分配给当鼠标悬停在 HTML 元素上时出现的元素。

为了设置和获取超链接属性值，您需要编写以下 jQuery 代码:

Getsetattribjq.js

$(document).ready(function() {
       alert($('a').attr('href'));
       $('a').attr('title', 'Click for bmharwani.com');
       $('a').attr('href','http://jquery.com');
       alert($('a').attr('href'));
})

它是如何工作的

超链接的属性值将通过警告对话框显示。因为超链接最初是指向 http://bmharwani.com 的，所以这个 URL 会显示在提醒对话框中(见图 1-16 (a))。超链接的标题设置为“点击查看 bmharwani.com ”,因此，当指向超链接时，将显示标题(参见图 1-16(c) )。超链接设置为指向 http://query.com 。超链接的href属性通过警告对话框显示(即，超链接指向的 URL 使用警告对话框显示)。参见图 1-16 (b)。

img/192218_2_En_1_Fig16_HTML.jpg

图 1-16

(a)显示超链接指向的 URL 的警告对话框;( b)显示超链接的 href 属性的警告对话框;( c)在指向超链接时显示的超链接的标题

1.18 1-15.计算 DOM 中节点的数量并显示它们的文本

问题

您希望通过 jQuery 访问 DOM 及其节点。

解决办法

在 DOM 中，网页以树结构的形式表示，具有根节点(父节点)和几个分支(子节点)，其中每个 HTML 元素以节点的形式表示。在 jQuery 的帮助下，可以根据需要访问和操作这些节点。

让我们看看下面的 HTML 页面:

countnodes.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery Examples</title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="countnodesjq.js" type="text/javascript"></script>
   </head>
   <body>
      <div id="root">
      <div>Darjeeling</div>
      <div>Assam</div>
      <div>Kerala</div>
      </div>
   </body>
</html>

您可以看到前面的 HTML 文件包括用于加载 jQuery 库的<script>标记，以及用于包含包含 jQuery 代码的 JavaScript 文件的标记(countnodesjq.js)。您还可以看到 HTML 文件包含一个带有id="root"的div元素。这个div元素中的所有元素都是子元素(即带有id="root"的div是其内部描述的所有div元素的父元素)。要计算 DOM 节点数并显示它们的文本，请编写以下 jQuery 代码:

countnodesjq.js

$(document).ready(function() {
        var $nodes = $('#root').children();
        alert('Number of nodes is '+$nodes.length);
        var txt="";
        $('#root').children().each( function() {
        txt+=$(this).text();
     });
     alert(txt);
});

它是如何工作的

id="root"的 div 的所有子元素都被访问并赋给变量$nodes。您使用第一个警告语句显示子节点集合的长度(参见图 1-17(a) )。此后，在each()方法的帮助下，您可以一次一个地访问$nodes中存储的所有元素。使用text()方法，访问并连接字符串变量$txt中元素的文本。最后，通过另一种alert()方法显示所有子节点的文本，如图 1-17(b) 所示。

img/192218_2_En_1_Fig17_HTML.jpg

图 1-17

(a)通过警告对话框显示的节点计数,( b)显示的 HTML 元素的文本内容

让我们逐一看看前面的 jQuery 代码中使用的方法。

每个( )

each()是一种方法，用于迭代包装集合中的每个元素(所选元素)。它包含一个迭代器函数，您可以在其中编写应用于集合中每个单独元素的代码。

文本( )

text()是 jQuery 对象的一个方法，用于访问所选元素的文本内容。所选元素的文本内容以字符串的形式组合并返回。要查看段落元素的文本内容，可以编写以下 jQuery 代码:

alert($('p').text());

假设段落元素如下例所示:

<p>Styles make the formatting job much easier and more efficient. To give an attractive look to web sites, styles are heavily used.

<span>jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. </span>Not only is it easy to learn, but it's easy to implement too.<br>

<a href="a1.htm"> jQuery Selectors</a> are used for selecting the area of the document where we want to apply styles </p>

前面的 jQuery 代码将显示如图 1-18 所示的输出。

img/192218_2_En_1_Fig18_HTML.jpg

图 1-18

HTML 文件的段落元素的文本内容

您可以使用以下语句查看段落元素的子元素的文本内容:

$(document).ready(function() {
       alert($('p').children().text());
});
父级( )

parent()方法是一种树遍历方法，它搜索每个所选元素的直接父元素，并返回一个新的 jQuery 对象。这个方法在 DOM 树中只向上移动一层。要获取 span 元素的父元素的文本内容，可以使用以下 jQuery 代码:

alert($('span').parent().text());

1.19 1-16.获取元素的 HTML

问题

您想要查看所选元素的 HTML 代码。

解决办法

首先，假设 HTML 文件包含以下段落元素:

obtainhtml.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery Examples</title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="obtainhtmljq.js" type="text/javascript"></script>
  </head>
  <body>

<p>Styles make the formatting job much easier and more efficient. To give an attractive look to web sites, styles are heavily used.

<span>jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. </span>Not only is it easy to learn, but it's easy to implement too.<br>

<a href="a1.htm"> jQuery Selectors</a> are used for selecting the area of the document where we want to apply styles </p>

  </body>

</html>

显示段落元素的 HTML 代码的 jQuery 代码如下所示:

obtainhtmljq.js

$(document).ready(function() {
        alert($('p').html());
});
它是如何工作的

段落元素的内容被访问，并在html()方法及其 HTML 代码的帮助下显示出来。html()方法获取所选元素的第一个元素的 HTML 内容。它以字符串的形式返回 HTML 内容。html()和text()的区别在于text()方法可以在 XML 和 HTML 文档中使用，而html()只能在 HTML 文档中使用。另一个区别是html()方法显示标签和文本。

您将得到的输出如图 1-19 所示。您可以看到输出包括标签和文本。

img/192218_2_En_1_Fig19_HTML.jpg

图 1-19

HTML 文件的段落元素的 HTML 内容

要获取 span 元素的 HTML 内容，可以使用以下语句:

alert($('span').html());

要获取 span 元素的父元素的 HTML 内容，可以使用以下 jQuery 代码:

alert($('span').parent().html());

1.20 1-17.为不同的 HTML 元素分配相同的类名并对它们应用样式

问题

您希望为两个 HTML 元素分配相同的类名，并对它们应用样式。这两个元素可以是段落和 h1 元素。

解决办法

让我们检查下面的 HTML 文件，其中名为features的类被分配给一个段落和 h1 元素:

assignsameclass.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery Examples</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="sameclassjq.js" type="text/javascript"></script>
   </head>
   <body>
       <p class="features">Styles make the formatting job much easier and more efficient.</p>
      To give an attractive look to web sites, styles are heavily used.
        <h1 class="features">Using jQuery</h1>
   </body>
</html>

要将样式应用于前面 HTML 文件中的类features的元素，可以使用以下内容创建外部样式表(style.css):

.features{color:green;font-style:italic}

如果希望通过 jQuery 代码将样式规则应用于 HTML 元素(而不是自动应用)，需要在样式表中为样式规则指定其他名称。

.highlight{color:green;font-style:italic}

然后，您需要编写以下 jQuery 代码:

sameclassjq.js

$(document).ready(function() {
     $('.features').addClass('highlight');
});
它是如何工作的

在 HTML 文件中，段落和 h1 元素都属于类features。在最终的样式表中，样式规则有一个选择器.highlight，这意味着在这个规则中定义的属性将应用于所有属于类highlight的 HTML 元素。样式规则中定义了两个属性，color和font-style，这些属性应用绿色和斜体样式。

前面的 jQuery 代码将在所有具有类名features的 HTML 元素上设置 CSS 类highlight。输出如图 1-20 所示。

img/192218_2_En_1_Fig20_HTML.jpg

图 1-20

同样的类也适用于

和

标签

1.21 1-18.总结

本章不仅重点解释了 jQuery 的基本特性，还解释了 DOM 的概念和不同的选择器类型。您了解了如何在网页中包含 jQuery 将样式应用于包装集；指定段落；统计特定类别的内容；和应用样式。您还了解了如何返回到上一个 DOM，如何移除特定的 DOM，以及如何预先计划和追加元素。您还学习了应用链接的过程，使用for循环显示无序列表元素，替换 DOM 元素，替换文本和 HTML，克隆 DOM，显示兄弟元素，以及设置和获取 HTML 元素的属性。

下一章将解释如何使用数组和不同的迭代技术。你将学习排序数组，分割数组，搜索和显示一个数值数组和一个字符串数组，以及连接两个数组的过程。您还将学习如何创建对象数组以及如何使用关联数组。

二、数组和迭代

在这一章中，你将学习如何使用数组和不同的迭代技术在数组中搜索想要的信息。我们将在本章中介绍以下食谱:

  • 对数组排序

  • 将数组一分为二

  • 从数值数组中搜索并显示所需的值

  • 连接两个数组

  • 在字符串数组中搜索所需信息

  • 操作数组元素

  • 将数值数组转换为字符串并查找它的子字符串

  • 创建对象数组并显示内容

  • 使用关联数组

  • 对对象数组进行排序

2.1 对数组排序

问题

你有一个元素数组，你想按照你想要的顺序对它们进行排序。

解决办法

下面是一个包含一个<div>元素和一个无序列表的 HTML 文件:

Sortarray.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="sortarrayjq.js" type="text/javascript"></script>
  </head>
  <body>
<div></div>
<ul class="sorted"></ul>
  </body>
</html>

您可以在上面的代码中看到，定义了一个<div>元素，定义了一个无序列表，并为其分配了类sorted。文本将通过<div>元素显示，排序后的电子产品将通过一个无序列表显示。

将数组元素按升序排序并显示在屏幕上的 jQuery 代码如下:

Sortarrayjq.js

$(document).ready(function() {
     var items=["Television", "Referigerator", "Cameras", "Cell Phones", "Laptops" ]
     items.sort();
     $('div').text("Following are the " +  items.length + " electronic items for sale");
     for (var i = 0; i < items.length; i++){
          $('ul.sorted').append($("<li>" + items[i] + "</li>"));
     }

});

在上面的 jQuery 代码中，使用了一些方法，如sort()、append()和length属性，所以我们先来看看它们。

排序( )

顾名思义，sort()方法就地对数组元素进行排序。默认情况下，元素将按升序排序。原始数组本身按以下方法排序:

语法:

array.sort(compare_function)

其中compare_function是可选的，定义了排序顺序。

示例:

array.sort(function(a,b){
return a-b;
});

比较函数可能返回值<0, =0, or > 0。

  • 当< 0 时，表示第二个值大于第一个值，因此在数组中被下推。

  • 当> 0 时，第一个值较大，因此在数组中被下推。

  • 当=0 时，不会发生任何变化，因为两个值相等。

追加( )

append()方法在每个选中元素的末尾插入指定的信息。

语法:

  • info参数代表必须插入的数据。这些数据可以是简单的 HTML 元素或 jQuery 对象。

  • function(index,html)其中function参数返回要插入的数据，index 参数指向元素的位置，html返回所选元素的 HTML 内容。

$(selector).append(info,function(index,html))
长度属性

length属性计算所提到的 jQuery 对象中元素的数量并返回它。

语法:

$(selector).length

其中selector是需要确定计数的 jQuery 对象。

它是如何工作的

字符串数组由名称items定义，并被赋予特定的电子项目。调用sort方法，数组items按字母顺序排列。使用text()方法，通过<div>元素显示文本消息，指示待售电子商品的数量。使用一个for循环来逐个访问数组的每个元素，并以无序列表的列表项形式显示，如图 2-1 所示。

img/192218_2_En_2_Fig1_HTML.jpg

图 2-1

项目计数及其排序顺序

为了反转排序(即，以相反的字母顺序排列项目)，在items.sort()方法之后，添加以下语句:

items.reverse();

下面简单介绍一下reverse()方法。

反向( )

方法颠倒了数组中元素的顺序。数组本身被修改。

语法:

array.reverse()

添加reverse()方法后，您将得到如图 2-2 所示的输出。

img/192218_2_En_2_Fig2_HTML.jpg

图 2-2

显示项目的数量，并以相反的顺序显示项目

Note

对于数字数组，items.sort()不会给出正确的结果，因为 125 会被认为小于 45，因为以 1 开头的数字会被认为小于以 4 开头的数字。要对数值数组进行排序，需要用下面的语句替换items.sort语句:

items.sort(function(a,b){
      return a-b;
});

以下是完整的 jQuery 代码:

$(document).ready(function() {
     var items=[67,51,125,39,84, 44]
     items.sort(function(a,b){
        return a-b;
    });
    $('div').text("Following are the " +  items.length + " numericals in ascending order");
    for (var i = 0; i < items.length; i++){
        $('ul.sorted').append($("<li>" + items[i] + "</li>"));
    }
});

在运行程序时，你会得到一个按升序排序的数字数组，如图 2-3 所示。

img/192218_2_En_2_Fig3_HTML.jpg

图 2-3

显示数组的长度，其元素按升序显示

2.2 将数组一分为二

问题

你有一个数组，你想把它分成两部分。

解决办法

下面是包含两对<div>和<p>元素的 HTML 文件:

Splitarray.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="splitarrayjq.js" type="text/javascript"></script>
  </head>
  <body>
<div id="electronics"></div>
<p class="electronics"></ul>
<div id="garments"></div>
<p class="garments"></ul>
  </body>

</html>

您可以在上面的代码中看到有两对<div>和<p>元素，因为您想要分别显示电子产品和服装。每个<div>元素将显示各自的标题(即，其下方显示的项目是电子产品还是服装)。类似地，每个<p>元素将用于显示各自的项目。为了区分两个<div>元素，它们分别被赋予 idelectronics和garments。类似地，两个<p>元素分别被分配了类electronics和garments。

初始化数组、拆分数组以及分别显示其内容的 jQuery 代码如下:

Splitarrayjq.js

$(document).ready(function() {
    var items=["Television", "Refrigerator", "Cameras", "Cell Phones", "Laptops", "Jeans", "Shirts", "Blazers" ]
    electronics=items.splice(0,5);
    $('div#electronics').text("Following are the " +  electronics.length + " electronic items for sale");
    $('p.electronics').html(electronics.join());
    $('div#garments').text("Following are the " +  items.length + " garments for sale");
    $('p.garments').html(items.join());
});

在上面的 jQuery 代码中，使用了splice()和join()方法，所以我们先快速看一下这两个方法。

拼接( )

splice()方法执行向数组添加新元素和从数组中移除现有元素的任务。方法返回修改后的数组。

语法:

  • location参数表示添加或删除元素的下标或索引位置。如果该值为负，则意味着该位置位于数组的末尾。

  • number参数指定要从上述位置移除的元素数量。

  • items_to_insert参数是一个由逗号分隔的项目列表，您想要在指定位置插入这些项目。该参数是可选的。

array.splice(location, number, items_to_insert )

方法修改数组并返回移除的元素列表。如果没有移除任何元素，则返回一个空数组。

加入( )

join()方法连接数组的元素，并以字符串的形式返回它们。

语法:

array.join(separator)

其中separator参数是分隔数组中每个元素的分隔符。默认分隔符是逗号。

方法返回一个字符串，该字符串包含由提供的分隔符分隔的所有连接元素。

它是如何工作的

items数组被初始化，一些电子产品和服装被分配给它。

因为数组items中的前五个元素是电子产品，所以使用splice()方法从items数组中提取前五个元素，并将它们分配给另一个名为electronics的数组。在应用了splice()方法后，第六个元素及以后的元素(直到结束)将只保留在items数组中(即服装将保留在items数组中)。电子产品的数量通过 id 为electronics的<div>元件显示。接下来，电子阵列中的所有电子项目通过类别为electronics的<p>元素显示。类似地，服装商品的数量通过 id 为garments的<div>元素显示。items数组中的服装名称通过分配了garments类的<p>元素显示(见图 2-4 )。

img/192218_2_En_2_Fig4_HTML.jpg

图 2-4

划分阵列，一个显示电子产品，另一个显示服装

如果您希望元素一个接一个地出现，您可以将<br/>作为参数传递给join()方法。

Note

在这个菜谱中，您将学习根据数组的索引来拆分数组。根据内容分割数组将在本章后面介绍。

2.3 从数字数组中搜索并显示所需的值

问题

在一个数值数组中有一些值，你想显示数组中的前五个值以及小于 5 的值。

解决办法

为了显示 array 的所有元素、前五个元素以及值小于 5 的元素，在一个 HTML 文件中定义了三对<div>和<p>元素，如下所示:

Searchnumarr.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="searchnumarrjq.js" type="text/javascript"></script>
  </head>
  <body>
<div id="allnums"></div>
<p class="allnums"></ul>
<div id="first5"></div>
<p class="first5"></ul>
<div id="lessthan5"></div>
<p class="lessthan5"></ul>
  </body>
</html>

因为您想要显示三类值(所有值、前五个值和小于 5 的值)，所以创建了三个<div>和<p>元素对。三个<div>元素被分配了 idallnums、first5,和lessthan5。类似地，为了区分三个<p>元素，它们分别被分配了类别allnums、first5和lessthan5。

为了显示数组中的所有项目，显示前五个元素以及少于五个的元素，jQuery 代码如下所示:

Searchnumarrjq.js

$(document).ready(function() {
     var nums=[5,0,4,2,7,1,9,3,6,8]
     $('div#allnums').text("Complete list");
     $('p.allnums').html(nums.join(", "));
     first5 =$.grep(nums, function( n, i ) {
           return ( i<=4 );
     });
     $('div#first5').text("First 5 values");
     $( "p.first5" ).text(first5.join( ", " ) );
     lessthan5 =$.grep(nums, function( n, i ) {
           return ( n<5 );
     });
     $('div#lessthan5').text("Values less than 5");
     $( "p.lessthan5" ).text(lessthan5.join( ", " ) );
});

在上面的 jQuery 代码中，使用了grep()方法，所以我们来了解一下它是如何工作的。

grep()

grep()方法用于搜索满足过滤函数的数组元素。

语法:

  • array参数表示必须进行搜索的数组。

  • function(value, location)参数表示采用两个参数的过滤函数:

    • value指向数组的当前元素。

    • location指向当前元素的下标。

  • 如果忽略invert参数，则返回一个数组，其中包含函数返回 true 的所有元素。但是如果这个参数作为 true 传递，那么就会发生相反的情况。你得到一个数组，它包含了函数返回 false 的所有元素。

jQuery.grep(array, function(value, location) [, invert])

grep()方法返回满足过滤函数的元素，不影响原始数组。

它是如何工作的

一个整数数组由名字nums定义，并用几个整数值初始化。ID 为allnums的div元素被赋予文本完整列表以显示**。**

数组nums中的所有整数值都通过被分配了类allnums的<p>元素显示。正在显示的元素由逗号分隔，并将显示在同一行上。要在单独的行上显示数组元素，请用<br/>元素替换join()方法中的逗号。

grep()方法与过滤器function()一起使用，其中filter()函数被设置为条件 i < =4，因此它将从nums数组中提取索引值小于或等于 4 的元素，并将其分配给数组first5。数组first5中的元素将通过分配了类别first5的段落显示(见图 2-5 )。

同样，grep()方法与过滤器function()一起使用，其中filter()函数被设置为条件 n < 5，因此filter函数将从nums数组中提取值小于 5 的元素，并将其分配给数组lessthan5。lessthan5数组中的元素将通过被分配了类别lessthan5的段落显示，如图 2-5 所示。

img/192218_2_En_2_Fig5_HTML.jpg

图 2-5

显示完整的数组、前五个值以及小于 5 的值

2.4 连接两个数组

问题

你有一个包含一些值的数字数组。您希望用它创建两个数组，一个数组包含所有能被 3 整除的数字，另一个数组包含能被 5 整除的数值。然后，您希望将这两个数组连接成一个包含可被 3 或 5 整除的数字的数组。

解决办法

为了显示原始数组、包含可被 3 整除的元素的数组、包含可被 5 整除的元素的数组以及两个数组的串联，在 HTML 文件中定义了四对<div>和<p>元素:

Arrconcatenate.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="arrconcatenatejq.js" type="text/javascript"></script>
  </head>
  <body>
  <div id="allnums"></div>
       <p class="allnums"></ul>
       <div id="divisibleby5"></div>
       <p class="divisibleby5"></ul>
       <div id="divisibleby3"></div>
      <p class="divisibleby3"></ul>
      <div id="divisibleby3or5"></div>
      <p class="divisibleby3or5"></ul>
  </body>
</html>

您可以在上面的代码中看到，定义了四对<div>和<p>元素，其中<p>元素将用于显示内容，<div>元素将用于显示标题(即，通过<p>元素通知正在显示的内容)。为了在它们之间进行区分，这些元素被分配了 idallnums、divisibleby5、divisibleby3和divisibleby3or5。

jQuery 首先从主数组创建两个数组，一个包含可被 3 整除的元素，另一个包含可被 5 整除的元素，最后将这两个数组连接起来，形成一个包含可被 3 或 5 整除的元素的数组。完成上述任务的完整 jQuery 代码如下:

Arrconcatenatejq.js

$(document).ready(function() {
     var nums=[5,0,4,2,7,1,9,3,6,8]
     $('div#allnums').text("Complete list");
     $('p.allnums').html(nums.join(", "));
     divby5 =$.grep(nums, function( n, i ) {
         return ( (n!=0) && (n%5==0 ));
    });
    $('div#divisibleby5').text("Values divisible by 5");
    $( "p.divisibleby5" ).text(divby5.join( ", " ) );
     divby3 =$.grep(nums, function( n, i ) {
         return ( (n!=0) && (n%3==0) );
    });
    $('div#divisibleby3').text("Values divisible by 3");
    $( "p.divisibleby3" ).text(divby3.join( ", " ) );
    $.merge( divby3,divby5 )
    //divby3or5=divby3.concat(divby5);
    $('div#divisibleby3or5').text("Values divisible by 3 or 5");
    $( "p.divisibleby3or5" ).text(divby3.join( ", " ) );
    //$( "p.divisibleby3or5" ).text(divby3or5.join( ", " ) );
});

在上面的 jQuery 代码中，使用了两个方法，merge()和concat()，我们先来快速浏览一下。

合并( )

merge()方法将两个数组的内容合并成第一个数组。

语法:

$.merge( first_array, second_array )

其中first_array是将second_array的元素合并到的数组。second_array的内容不受影响。

concat()

方法可以用来连接两个字符串和数组。被连接的两个数组将保持不受影响，并返回连接的版本。

语法:

concatenated_array = array1.concat(array2, ...)

其中array1、array2等。是要连接的数组，并且连接的数组(即合并的元素)被返回并且可以被分配给新的数组。

它是如何工作的

定义了一个名为nums array 的整数数组，包含几个值。为了首先显示数字，标题完整列表通过 id allnums的<div>元素显示。在<div>元素下面，使用allnums类的<p>元素，显示nums数组中的所有数值。

为了从nums数组中得到能被 5 整除的数字，使用了grep()方法和filter函数，并且在filter函数中使用了%5表达式来寻找能被 5 整除的数字。因此，所有能被 5 整除的数字都从nums数组中提取出来，并分配给名为divby5的数组。通过类divisibleby5的<p>元素显示divby5数组中的元素。这些元素的标题是 ID 为divisibleby5的文本Values divisible by 5到<div>元素。使用相同的过程，可被 3 整除的元素从nums数组中提取出来，并分配给名为divby3的数组。

此后，调用merge()方法，将两个数组divby3和divby5传递给该方法，并将divby5数组的内容添加到divby3数组中。

合并的元素(即在divby3数组中可被 3 或 5 整除的元素)然后通过类divisibleby3or5的<p>元素显示。图 2-6 显示了程序的输出。

Note

还有一种方法可以显示能被 3 或 5 整除的数组元素。也可以用concat方法替换merge()方法。也就是说，divby3和divby5数组的内容被连接起来，组合的元素被分配给divby3or5数组。上面代码中的第一个注释掉的语句也是这样:

//divby3or5=divby3.concat(divby5);

此后，divby3or5数组中连接的元素可以使用divisibleby3or5类的<p>元素显示在屏幕上。第二个被注释掉的语句执行此任务:

//$( "p.divisibleby3or5" ).text(divby3or5.join( ", " ) );

img/192218_2_En_2_Fig6_HTML.jpg

图 2-6

显示所有数组元素和可被 5 整除的元素、可被 3 整除的元素以及可被 3 或 5 整除的元素

2.5 在字符串数组中搜索所需信息

问题

你有一个字符串数组，在这个数组之外，你想显示特定长度的字符串，以特定字符结尾的字符串，以及有特定子串的字符串。

解决办法

为了显示在字符串数组上执行的不同查询的结果，在下面的 HTML 程序中定义了四对<div>和<p>元素:

Desiredstr.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="desiredstrjq.js" type="text/javascript"></script>
   </head>
   <body>
     <div id="allitems"></div>
     <p class="allitems"></ul>
     <div id="length8"></div>
     <p class="length8"></ul>

     <div id="endingwiths"></div>
     <p class="endingwiths"></ul>
     <div id="juices"></div>
     <p class="juices"></ul>
   </body>
</html>

您可以在上面的代码中看到，有四对<div>和<p>元素将用于显示所有项目，长度正好为 8 个字符的项目，以字符 s 结尾的项目，以及列表中的所有果汁。<div>元素将用于显示正在显示的项目类别的标题，这就是为什么它们分别被分配了 idallitems、length8、endingwiths和juices。<p>元素用于显示落入类别的项目，因此分别被分配了类别allitems、length8、endingwiths和juices。

显示字符串数组中所需字符串的 jQuery 代码如下所示(即，搜索满足特定条件的字符串):

Desiredstrjq.js

$(document).ready(function() {
    var items=["Aloe vera juice", "Apple juice", "Biscuits", "Juice of oranges", "Cakes", "Brownies", "Doughnut", "Juice of pomegranate" ]
    $('div#allitems').text("Complete list");
    $('p.allitems').html(items.join(", "));

    $('div#length8').text("Items of length 8 characters");
    length8items =$.grep(items, function( n, i ) {
          return ( n.length ==8 );
    });
    $( "p.length8" ).text(length8items.join( ", " ) );

    $('div#endingwiths').text("Items ending with 's'");
    endingwithsitems =$.grep(items, function( n, i ) {
         return n.match(/[s]$/)

    });
    $( "p.endingwiths" ).text(endingwithsitems.join( ", " ) );
    $('div#juices').text("List of juices");
     juiceitems =$.grep(items, function( n, i ) {
         return ( n.toLowerCase().indexOf("juice") >= 0 );
    });
    $( "p.juices" ).text(juiceitems.join( ", " ) );
});

上面的 jQuery 代码中使用了indexOf()方法，我们先来看看这个方法。

索引（）

indexOf()方法在主字符串中搜索指定的字符串，并返回指定字符串第一次出现的位置。返回的位置是从 0 开始的，如果在主字符串中找不到要搜索的字符串，则该方法返回-1。

语法:

  • string_to_search参数表示要搜索的字符串。它区分大小写。

  • location_to_start参数指定开始搜索的位置。该参数是可选的，其默认值为 0。

string.indexOf(string_to_search, location_to_start)

为了在特定的选择器中搜索子串，使用了index()方法。我们也来看看这个方法。

索引( )

index()方法在选择器中搜索指定的元素，并返回一个表示元素索引位置的整数。

语法:

$(selector).index(element_to_search)

其中element_to_search参数表示要搜索的元素。如果没有使用参数，该方法将返回选择器的第一个元素相对于其同级元素的索引位置。

它是如何工作的

访问 ID 为allitems的<div>元素，将其文本设置为完整列表。通过将项目数组中的所有元素分配给类allitems.的<p>元素，它们被显示在屏幕上

类似地，ID 为length8的<div>元素被赋予长度为 8 个字符的文本项。一个grep方法与一个过滤函数一起使用，该函数从items数组中提取长度等于 8 个字符的所有项目，并将它们分配给数组length8items。此后，通过类length8的<p>元素显示数组length8items中的所有元素。

类似地，ID 为endingwiths的<div>元素被赋予以 s 结尾的文本条目。一个grep方法与一个过滤函数一起使用，该函数使用一个正则表达式从最后一个字符为 s 的items数组中提取元素，然后将这些元素分配给名为endingwithsitems的数组。最后，数组endingwithsitems中的元素通过类endingwiths的<p>元素显示。

ID 为juices的最后一个<div>元素被设置为显示文本果汁列表。grep()方法与过滤函数一起使用，过滤函数在items数组的元素中搜索单词果汁，这些元素被分配给数组juiceitems。此后，通过类juices的<p>元素显示数组juiceitems中的所有元素，如图 2-7 所示。

img/192218_2_En_2_Fig7_HTML.jpg

图 2-7

显示整个字符串数组和长度为 8 个字符的元素、以 s 结尾的元素以及带有 juice 子字符串的所有元素

2.6 操纵数组元素

问题

您希望操作数组元素来完成一些任务，比如对它们应用序列号、将它们转换成大写字母以及其他任务。

解决办法

让我们假设一个 HTML 文件，它有一个显示消息Members of my Group的 heading 元素和一个空的 paragraph 元素，如下所示:

manipulatearray.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="manipulatearrayjq.js" type="text/javascript"></script>
  </head>
  <body>
         <h3> Members of my Group are </h3>
         <p></p>
  </body>
</html>

这个空白段落元素将显示取自数组的名称，并应用序列号。

显示数组元素和序列号的 jQuery 代码如下所示:

manipulatearrayjq.js

$(document).ready(function() {
     var members = [ "John", "Steve", "Ben", "Damon", "Ian" ];
     members = $.map(members, function(n,i){ return(i+1+"."+n); });
     $('p').html(members.join("<br />"));
});
将名称转换为大写

让我们看看如何在回调方法中使用其他有用的方法来操作数组成员。第一个解决方案展示了如何用toUpperCase()方法将所有的名字转换成大写。

convnamestoupperjq.js

$(document).ready(function() {
     var members = [ "John", "Steve", "Ben", "Damon", "Ian" ];
     members=$.map(members, function(n,i){ return(i+1+"."+n.toUpperCase());});
     $('p').html(members.join("<br/>"));
});
使用有序列表

用大写字母和序列号显示数组元素的另一种方法是利用有序列表元素。下面是一个 HTML 文件，显示了一个标题元素和一个空的有序列表元素。

orderedlist.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="orderedlistupperjq.js" type="text/javascript"></script>
  </head>
  <body>
      <h3> Members of my Group are </h3>
      <ol id="list">
       </ol>
</body>

</html>

以大写形式显示数组元素的 jQuery 代码如下:

orderedlistupperjq.js

$(document).ready(function() {
    var memlist = $( "#list" );
    var members = [ "John", "Steve", "Ben", "Damon", "Ian" ];
    members=$.map(members, function(n){ return(n.toUpperCase());});
    $.each(members,function( index, value ){
        memlist.append($( "<li>" + value + "</li>" ));
    });
});

在上面的 jQuery 代码中，使用了each()方法，所以让我们快速看一下这个方法。

每个( )

each()方法用于定义一个函数，该函数在每个选定的元素上执行。也就是说，循环遍历所有选定的 DOM，并执行函数中定义的代码。

语法

  • function(index,element)参数包含需要在每个所选元素上执行的语句。

  • index代表选择器的位置。

  • element代表当前元素。

$(selector).each(function(index,element))

它是如何工作的

要理解这个食谱，你需要了解一下map()法。该方法遍历数组的每个元素，并在每个数组元素上调用回调函数。如果您愿意，可以将返回的元素分配给另一个数组或同一个数组。map()方法也可以遍历具有长度属性的类似数组的对象。下面是map()的语法:

map(array, callback);

这里的回调函数包含对数组元素执行处理任务的语句。在第一个解决方案中，您希望显示存储在数组中的名称以及序列号。您可以看到数组members已经定义，并且包含了您想要显示的名称。接下来将这个数组传递给map()方法。map()方法中的回调函数包含两个参数，n 和 I，其中 n 是指传递给map()方法的数组元素(名称)，I 是单个数组元素的索引(索引从 0 开始)。要使序列号从 1 而不是 0 开始，可以在每次迭代中给 I 加 1。回调函数返回的值如下所示:

return(i+1+"."+n)

该语句从 1 开始逐个返回数组的所有元素。输出如图 2-8 所示。

img/192218_2_En_2_Fig8_HTML.jpg

图 2-8

使用数组映射为数组元素分配序列号

接下来，使用回调函数中的toUpperCase()方法将数组中存储的所有名称转换成大写:

members=$.map(members, function(n,i){ return(i+1+"."+n.toUpperCase()); });

回想一下，回调函数中的参数 n 和 I 分别引用数组元素和索引号。可以看到toUpperCase()对 n 的应用(即以数组元素的形式存储在数组中的名字)将名字转换成大写，并返回显示在段落元素中。输出将是转换成大写的名字，以及序列号，如图 2-9 所示。

img/192218_2_En_2_Fig9_HTML.jpg

图 2-9

使用数组映射将数组元素转换为大写

有序列表解决方案将自动编号应用于其列表元素。向 members 数组分配map()方法的结果，这将把每个数组元素转换成大写。然后将members数组的每个成员一个接一个地追加到有序列表中(这个列表有一个 idlist，通过 jQuery 代码来标识它)。您将得到如图 2-10 所示的输出。

img/192218_2_En_2_Fig10_HTML.jpg

图 2-10

通过列表项以大写形式显示数组元素

2.7 将数值数组转换为字符串并查找其子字符串

问题

你有一个数字数组，你想把它转换成一个字符串，这样你就可以应用substr()方法取出字符串的一部分。

解决办法

下面是一个 HTML 文件，它包含三个标题元素，分别显示您正在处理的原始数字数组的标题、转换为字符串形式的数组以及字符串的子字符串。此外，在每个标题元素下面是一个段落元素。这三个段落元素被分配了类名origarr、arrstring和partstring。类origarr的段落将用于显示数值数组的元素。arrstring类的段落将用于显示字符串(转换成字符串形式后的数组)，而partstring类的段落将用于显示字符串中你想要取出的部分。HTML 文件如下所示:

convnumarrayintostring.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="convnumtostringjq.js" type="text/javascript"></script>
  </head>
  <body>
       <h3>Original array is </h3>
       <p class="origarr"></p>
       <h3> Array in form of string </h3>
        <p class="arrstring"></p>
       <h3> Substring is </h3>
       <p class="partstring"></p>
  </body>
</html>

将数值数组转换成字符串，然后取出其中一部分的 jQuery 代码如下:

convnumtostringjq.js

$(document).ready(function() {
      var members = [67,51,125,39,84];
      $('p.origarr').html(members.join("<br/>"));
      var str = members.join("");
      $('p.arrstring').text(str);
      var substr = str.substr(0,3);
      $('p.partstring').text(substr);
});

它是如何工作的

您定义了一个包含五个元素的名为members的数字数组，并显示了类origarray的段落元素中的内容，用换行符(<br/>)分隔每个数组元素，以便数组元素一个接一个地显示。

接下来，通过将数字数组members的每个元素连接到字符串变量str中，中间没有任何空格，将数字数组members转换为字符串。也就是说，字符串str将包含一个接一个连接起来的数值数组的所有数值，中间没有任何空格。str变量显示在arrstring类的段落元素中。

最后，从索引位置 0 开始，从str变量中取出字符串的一部分。从那里，三个字符被提取并存储在字符串变量substr中。变量substr的内容将显示在类partstring的段落元素中。输出如图 2-11 所示。

img/192218_2_En_2_Fig11_HTML.jpg

图 2-11

转换为字符串的数值数组

2.8 创建对象数组并显示内容

问题

您希望创建一个对象数组，其中每个对象都包含一个由国家名称和首都组成的对。

解决办法

为了显示对象数组中的内容(即显示国家名称和相应的首都)，创建了一个<div>元素和一个<p>元素，如下所示:

Countrycap.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="countrycapjq.js" type="text/javascript"></script>
  </head>
  <body>
<div id="allcountries"></div>
<p class="allcountries">
  </body>

</html>

你可以在上面的代码中看到，为了给出一个惟一的标识，<div> e元素被赋予了一个 IDallcountries，而<p>元素被赋予了类allcountries。

下面的 jQuery 代码创建了一个对象数组，并显示了存储在 I:

Countrycapjq.js

$(document).ready(function() {
    var countries=[
    {
        "country": "India",
        "capital": "New Delhi"
    },
    {
        "country": "United States",
        "capital": "Washington D.C."
    },
    {
        "country": "England",
        "capital": "London"
    },
    {
        "country": "Australia",
        "capital": "Canberra"
    }
    ];
    $('div#allcountries').text("List of countries and their capitals");
    for(var i=0;i<countries.length;i++){
        $('p.allcountries').append("<tr><td>"+countries[i].country+ " </td><td>"+countries[i].capital+"</td><tr/>");
    }

});

它是如何工作的

创建一个名为countries的对象数组，其中每个对象包含两个属性，country和capital。创建了一些带有一些国家名称及其各自首都的对象。

ID 为allcountries的<div>元素被赋予文本List of countries and their capitals。使用一个for循环从数组中访问每个对象并显示国家和首都属性中的值，通过 ID 为allcountries的<p>元素显示，如图 2-12 所示。

img/192218_2_En_2_Fig12_HTML.jpg

图 2-12

显示对象数组的所有元素，其中每个对象由一个国家和首都对组成

为了根据国家名称的升序对对象数组进行排序，在通过a <div>元素显示数组之前，添加以下完整代码:

countries=countries.sort(function(a,b){
    if(a.country < b.country){return -1};
    if(a.country > b.country){return 1};
     return 0;

});

将 jQuery 中的上述代码添加到以下语句的上方:

$('div#allcountries').text("List of countries and their capitals");

第一个配方中解释了sort()方法。该数组将以国家名称的升序排列对象，如图 2-13 所示。

img/192218_2_En_2_Fig13_HTML.jpg

图 2-13

按国家名称排序后显示对象数组

2.9 使用关联数组

关联数组是索引本质上不是数字而是字符串的数组。这些字符串索引也称为键(即，关联数组只不过是一系列键/值对)。

问题

您希望以关联数组的形式显示某些国家及其首都。

解决办法

要显示标题和国家及其各自的首都，创建以下包含<div>和<p>元素的 HTML 文件:

Associativearr.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="associativearrjq.js" type="text/javascript"></script>
  </head>
  <body>
<div id="allcountries"></div>
<p class="allcountries">
  </body>
</html>

你可以在上面的代码中看到，ID 为allcountries的<div>元素和类为allcountries的<p>元素被定义，其中<div>元素将用于显示标题，<p>元素将用于显示内容

您需要编写 jQuery 代码来定义一个关联数组，以键和值的形式分配国家和首都，然后显示它们。

Associativearrjq.js

$(document).ready(function() {
    var countries={
        "India" : "New Delhi",
        "United States" : "Washington D.C.",
        "England" : "London",
        "Australia" : "Canberra"
    };
    $('div#allcountries').text("List of countries and their capitals");
    $.each(countries, function(key, value) {
         $('p.allcountries').append("<tr><td>"+key+ " </td><td>"+value+"</td><tr/>");
    });

});

它是如何工作的

一个关联数组由countries的名称创建，包括一个键/值对，其中键是国家名称，值是其首都。四个国家及其各自的首都用于初始化关联数组。

使用 ID 为allcountries的<div>元素显示文本List of countries and their capitals。使用一个each()循环，在关联数组的所有元素上执行指定的函数。该函数通过allcountries类的<p>元素访问键及其关联值并显示，如图 2-14 所示。

img/192218_2_En_2_Fig14_HTML.jpg

图 2-14

显示关联数组的内容

2.10 对对象数组进行排序

问题

学生信息以对象数组的形式存储。假设每个学生对象由三个属性组成:roll、name和emailId。您希望根据属性roll对数组进行排序。

解决办法

让我们创建一个 HTML 文件，它显示一个标题和一个类listofstud的空表格元素。table 元素将用于显示一个排序的对象数组。HTML 文件可能如下所示:

sortarrobject.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="sortarrobjectjq.js" type="text/javascript"></script>
  </head>
  <body>
      <h3>List of students is </h3>
      <table class="listofstud"></table>
  </body>

</html>

现在编写 jQuery 代码来创建一个对象数组，存储三个学生的信息，属性分别为roll、name和emailId。此外，您需要包含对student对象的roll属性执行排序的代码。这里显示了 jQuery 代码，在下一节中，您将看到它是如何工作的。

sortarrobjectjq.js

$(document).ready(function() {
     var students=[
    {
        "roll": 101,
        "name": "Ben",
        "emailId":"ben@gmail.com"
    },
    {
         "roll": 102,
        "name": "Ian",
        "emailId":"ian@gmail.com"
    },
    {
        "roll": 103,
        "name": "Caroline",
        "emailId":"carol@gmail.com"
    }

    ];
    students = students.sort(function(a,b){
       return b.roll-a.roll;
    });
    $.each(students,function( index, value ){
        $('table.listofstud').append("<tr><td>"+value.roll+"</td><td>"+value.name+"</td><td>"+
value.emailId+"</td></tr>");
    });
});

如果您想按照数组的name属性的字母顺序对数组进行排序，您需要将前面的sort()函数替换为如下函数:

students = students.sort(function(a,b){
     if(a.name<b.name){ return -1 };
     if(a.name>b.name){ return 1 };
     return 0;
});

它是如何工作的

在sort()方法中，您需要添加比较函数，该函数重复地从数组中获取一对值，并在比较的基础上返回值< 0、=0 和> 0。您可以看到，在比较函数中，您正在比较students对象的roll属性。该函数返回以下内容:

return b.roll-a.roll;

这意味着该函数将按照属性roll的降序对数组进行排序。此后，使用each()解析每个数组元素，并通过回调函数处理它们。在回调函数中，数组元素的每个属性，即roll、name和emailId，通过将它们放在<td>和</td>标签中来显示。这意味着每个数组元素都存储在单独一行的表数据元素中，数组元素的每个属性都以列的形式显示。结果是现在对象的数组以表格格式出现，如图 2-15 所示。

img/192218_2_En_2_Fig15_HTML.jpg

图 2-15

student 对象的数组，按 roll 属性的降序排序

当您对name属性进行排序时，您可以看到这次您正在比较students对象的name属性。如果第一个元素的name属性小于第二个元素的name属性(以 ASCII 值表示)，则该函数返回-1，反之则返回 1。结果将是基于name属性排序的student对象的数组。您将看到如图 2-16 所示的输出。

img/192218_2_En_2_Fig16_HTML.jpg

图 2-16

student 对象的数组，按 name 属性的字母顺序排序

2.11 摘要

在本章中，你学习了如何使用数字数组、字符串数组、关联数组和对象数组。您还学习了对数组进行排序、将数组分成几部分、在数组中搜索所需的元素，以及如何连接数组。此外，您还学习了如何定义对象数组以及关联数组的工作原理。

下一章着重于理解事件处理方法。你将学习当鼠标按钮被点击时，或者当输入框获得焦点时，或者当鼠标悬停在任何按钮上时，如何采取行动。您还将学习在鼠标上升和下降事件以及按下或释放某个键时执行任务。此外，您将学习放大和缩小图像，并在发生某些事件时对图像应用淡入淡出效果和动画。

avatar
文章
阅读
粉丝