jQuery2 秘籍（七）

原文：jQuery 2 Recipes

协议：CC BY-NC-SA 4.0

十一、创建和使用 jQuery 插件

jQuery 插件使得函数可移植，并且易于与任意数量的项目集成，因此实现了可重用性。在这一章中，你将学习如何从头开始创建 jQuery 插件，以及如何使用一些流行的 jQuery 插件。你学习如何用本章的食谱做以下事情。

创建一个插件来改变元素的字体大小，字体风格，前景色和背景色，并使插件可链接
允许将定制选项传递给插件
使用插件修改内容
使用 Magnific 弹出插件显示图像滑块
使用 iCheck 插件显示动态复选框和单选按钮
使用 blueimp Gallery 插件创建一个图库和轮播
使用 jQuery 验证插件验证表单

11.1 创建插件

插件是用标准 JavaScript 文件编写的代码，它提供了某些可以直接与 jQuery 库方法一起应用的 jQuery 方法。插件的编写使得它可以很容易地在代码中重用。因此，你写一次，受益多次。以下是创建插件的规则。

插件中的所有方法都必须以分号(；).
除非明确指出，否则该方法必须返回 jQuery 对象。
关键字 this.each 必须迭代匹配的元素。
插件文件名必须以扩展名为. js 的 jQuery 为前缀。

下面是命名 jQuery 插件的语法。

jquery.plugin_name.js

如图所示，通过添加最小值来表示缩小版本。

jquery.plugin_name.min.js

Note

在命名创建的插件时使用 jquery 前缀消除了与其他库的名称冲突。

您可以通过向原型添加函数来增加 jQuery 特性。为此，您需要公开 jQuery 原型。jQuery 原型通过 jQuery.fn 公开。换句话说，创建插件最简单的方法是使用 fn 属性。在 jQuery 中，fn 属性是 jquery.fn 函数的 prototype 属性的简单别名。

语法

jQuery.fn = jQuery.prototype = {
      jquery code;
}

将函数添加到这个原型中，可以从任何构造的 jQuery 对象中调用和使用这些函数。构造的 jQuery 对象根据使用的选择器保存一个元素数组。例如，$('p ')构造了一个保存

元素的 jQuery 对象。

11.2 11-1.创建一个插件来改变一个元素的字体大小，字体风格，前景色和背景色

问题

您想要创建一个插件，当应用于任何 HTML 元素时，必须将其字体大小设置为 25px，将其字体样式更改为斜体，并将前景和背景颜色分别更改为红色和黄色。

解决办法

为了应用和测试插件，让我们创建一个销售少量产品的 HTML 文件。下面的 HTML 代码通过两个

元素显示了两种待售产品，手机和笔记本电脑。两个

元素都被包装在

元素中，如下所示。

crplugin 1 . 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="jquery.crplugin1.js" type="text/javascript"></script>
    <script src="crplugin1jq.js" type="text/javascript"></script>
  </head>
  <body>
     <div> We deal with variety of products:
        <p>Mobiles</p>
        <p>Laptops</p>
     </div>
  </body>
</html>

您可以看到一个

元素是用特定的文本定义的。嵌套在元素中的是两个

元素，它们显示指示应用插件效果的产品名称的文本。

下面的 jQuery 代码创建了一个名为 style_products 的插件。

Jquery.crplugin1.js

$.fn.style_products = function() {
     this.css({ fontSize: "25px",
         color: "red",
     "font-style": "italic",
     background: "yellow" });
};

请记住，插件函数中的“this”关键字表示调用该函数的构造的 jQuery 对象。插件函数将 CSS 样式属性应用于 jQuery 对象。对象的字体大小设置为 25 px，前景色设置为红色，字体样式设置为斜体，背景色设置为黄色。

下面是将插件的方法应用于 HTML 文件的

元素的 jQuery 代码。

Crplugin1jq.js
$(document).ready(function() {
     $("p").style_products();
});

当$(“p”)时。style_products()被调用时,“this”的值是指包含页面上所有

元素的 jQuery 对象。结果两个产品名称的字号都是 25px，字体样式为斜体，背景色为黄色，文字颜色为红色，如图 11-1 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-1

两个产品名称的字号都变成了 25px，字体变成了斜体，背景颜色变成了黄色，前景色变成了红色

11.3 11-2.使插件可链接

为了让 jQuery 插件能够在实际例子中使用，它需要支持链接，这意味着能够应用其他函数。为此，插件的函数必须返回原始的 jQuery 对象，如下所示。

Jquery.crplugin1.js

$.fn.style_products = function() {
     this.css({ fontSize: "25px",
         color: "red",
     "font-style": "italic",
     background: "yellow" });
     return this;
};

最后一句话，“还这个；返回原始的 jQuery 对象。

为了演示在所选元素上链接的应用，让我们创建一个 CSS 样式表，其中包含名为的放大样式类，如下所示。

Crplugin1style.css

.enlarge{
       width: 100px;
       height: 100px;
}

您可以看到，放大样式类包含两个属性—宽度和高度，这两个属性的值都设置为 100px。

要应用并查看链接的效果，请修改 jQuery 代码 crplugin1jq.js，如下所示。

$(document).ready(function() {
     $("p").style_products().addClass("enlarge");
});

您可以看到，由于在所选的

元素上应用了链接，所以应用了 jQuery 插件的 style_products()方法，然后在< p >元素上也应用了放大。通过应用 style_products()方法，两个产品名称的字体大小都设置为 25px，字体样式设置为斜体，文本的背景颜色设置为黄色，文本颜色设置为红色。通过应用放大样式类，将包含产品名称的< p >元素的宽度和高度设置为 100px，如图 11-2 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-2

设置字体大小、字体样式、背景和前景色后，商品名称的宽度和高度设置为 100px

11.4 11-3.允许将定制选项传递给插件

问题

你想创建一个插件，并想给它传递不同的定制选项。

解决办法

有时，您希望插件是可定制的(例如，用户可以更改或修改它的某些默认值)。在这个方法中，您将创建一个插件方法，定义它的默认选项，并用用户传递的选项覆盖它们(例如，将不同的定制选项传递给插件，使它可以在不同的选择器上重用)。为了创建一个可定制的插件，jQuery 提供了一个$。扩展工具方法，创建一个插件，从而帮助增强 jQuery 特性。

要通过可定制的插件在 HTML 元素上应用想要的选项，让我们创建一个 HTML 文件。下面是定义一个

元素的 HTML 代码，在元素中，两个

元素定义如下。

Crplugin1b.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="jquery.crplugin1b.js" type="text/javascript"></script>
    <script src="crplugin1bjq.js" type="text/javascript"></script>
  </head>
  <body>
     <div> We deal with variety of products:
        <p id="phone">Mobiles</p>
        <p id="computer">Laptops</p>
    </div>
  </body>
</html>

您可以看到定义了一个

元素来显示一条消息，表明该站点上销售的产品类型。两个

元素被定义为显示网站上销售的两种产品，手机和笔记本电脑。因为，在一个

元素上，你想用默认选项应用插件函数，在另一个

元素上，你想用用户提供的选项应用插件函数，不同的 id，“电话”和“计算机”被分配给两个

元素。

下面显示了使用 style_products 方法的 jQuery 插件代码。方法包含属性的默认值，如果用户提供了这些值，它会将这些值应用于属性。

jquery。crplugin 1b . js

(function ($) {
$.fn.style_products = function(custom) {
     var settings = $.extend({
          fontSize: "15px",
          color : "white",
          fontStyle: "bold",
          background : "blue"
     }, custom);
     return this.css({
           fontSize: settings.fontSize,
              color: settings.color,
          fontStyle: settings.fontStyle,
          background: settings.background
     });
};
}(jQuery));

您可以在代码中看到，默认设置指定字体大小为 15px，字体样式为粗体，背景和文本颜色分别为蓝色和白色。如果用户提供了任何属性值(即，字体大小、颜色、字体样式或背景颜色)，属性的默认值将被用户指定的值覆盖。

下面是 jQuery 代码，用于调用插件的默认和可定制功能。

Crplugin1bjq.js

$(document).ready(function() {
     $("#computer").style_products();
     $("#phone").style_products({
          fontSize: "25px",
             color: "red",
          fontStyle: "italic",
          background: "yellow"
     });
});

可以调用方法来应用默认属性，也可以应用自定义属性。代码中的第一条语句调用插件的 style_products 方法。默认属性应用于具有计算机 id 的元素(例如，Laptops 文本以粗体白色显示，字体大小为 15 px，背景颜色为蓝色)。为了查看用户如何在属性中提供定制的值，在带有电话 id 的

元素上调用 style_products()方法。对于手机文本，应用由用户指定值的属性。因此，手机文本为红色斜体，字体大小为 25px，背景颜色为黄色(见图 11-3 )。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-3

通过应用属性，文本 Mobiles 以 25px 的字体大小、斜体样式和黄色背景显示，文本以红色显示。笔记本电脑的字体大小为 15 px，粗体，蓝色背景，白色文本

使用插件修改内容

您可以使用插件覆盖任何 HTML 元素的样式属性。例如，您可以更改或添加文本(例如，HTML 元素的内容可以通过插件进行修改)。

要向任何 HTML 元素添加文本，插件的方法修改如下。

jquery。crplugin 1b . js

(function ($) {
$.fn.style_products = function(custom) {
     var settings = $.extend({
          product_name: 'Refrigerators',
          fontSize: "15px",
          color : "white",
          fontStyle: "bold",
          background : "blue"
     }, custom);
     return this.append(", "+settings.product_name).css({
           fontSize: settings.fontSize,
              color: settings.color,
          fontStyle: settings.fontStyle,
          background: settings.background
     });
};
}(jQuery));

您可以看到一个用户定义的属性，product_name 设置为默认值，冰箱；用户总是可以通过提供该属性的所需值来更改其默认值。当返回“this”jQuery 对象时，您可以附加一个逗号(，)和分配给 product_name 属性的值。因此,“冰箱”文本被附加到应用插件方法的 HTML 元素中。

在 HTML 文件中有两个

元素，所以对一个

元素，应用带有默认值的插件方法，对第二个

元素，应用带有用户值的插件方法。通过这样做，您可以看到插件方法对默认选项和用户值的影响。

下面是使用默认选项和定制选项应用插件方法的 jQuery 代码。

Crplugin1bjq.js

$(document).ready(function() {
     $("#computer").style_products();
     $("#phone").style_products({
          product_name:'AirConditioners',
          fontSize: "25px",
             color: "red",
          fontStyle: "italic",
          background: "yellow"
     });
});

style_products 方法应用于具有计算机 id 的

元素，而不提供任何属性值。因此，style_products()方法对其属性使用默认值。“冰箱”被附加到具有计算机 id 的< p >元素的文本中(即“笔记本电脑”被修改为“笔记本电脑，冰箱”)，如图 11-4 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-4

文字修改为“笔记本电脑、冰箱”，“空调”追加到“手机”

用户提供了空调值作为 product_name 属性。“空调”被附加到带有电话 id 的

元素的文本中。因此，段落文本显示为手机、空调(见图 11-4 )。

使用插件

jQuery 在 https://plugins.jquery.com 有一个很大的插件库。大多数插件都包含了演示、例子、代码和文档的链接。本注册表中提到的插件都是在 GitHub ( http://github.com )代码库中管理的。GitHub 追踪插件的流行程度。我演示了使用一些插件的最快方法，并使用了他们的一些方法。我建议你参考这里讨论的插件的官方文档以获得完整的覆盖范围。

在代码中使用插件非常简单:下载并解压缩它。复制插件的。js 和。css 文件添加到您站点的文件夹中。一旦你的站点目录中有了插件，你就可以在你的网页上引用它。确保在主 jQuery 源文件之后、调用插件的 jQuery 脚本之前引用插件。

11.5 11-4.使用放大的弹出插件显示图像滑块

Dmitry Semenov 开发了 Magnific Popup。它是一个非常轻便和移动友好的 lightbox 和一个模态对话框插件，专注于优化性能和为使用任何设备的用户提供最佳体验(对于 jQuery 或 Zepto.js)。使用这个插件，图像、视频、谷歌地图和图片库可以显示动画效果。您可以在 https://plugins.jquery.com/magnific-popup/ 的弹出窗口中找到完整的信息。该页面显示了演示、下载、文档、主页等的链接。单击“立即下载”链接下载代码。zip 格式的代码包被下载到您的计算机上。解压文件。从 dist 文件夹中，将 jquery.magnific-popup.js 和 magnific-popup.css 文件复制到您站点的文件夹中。

问题

您希望使用 Magnific 弹出插件以图像滑块的形式显示某些图像和视频。

解决办法

你正在逐步学习使用 Magnific 弹出插件制作一个图像滑块。首先，制作一个单个图像的小图像弹出窗口，然后增加图像。最后，你学习制作一个完整的图像滑块，不仅可以显示图像，还可以显示视频。

使用 Magnific Popup 插件的最简单的例子是显示一个超链接，该超链接打开带有动画的相关图像。

下面是显示指向图像文件的超链接的 HTML 代码。

电站 gpopp . 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>
    <link rel="stylesheet" href="magnific-popup.css">
    <script src="jquery.magnific-popup.js"></script>
    <script src="usingpopupjq.js" type="text/javascript"></script>
  </head>
  <body>
<a class="test-popup-link" href="img/chip.jpg">Open popup</a>
  </body>
</html>

您可以看到由 magnific-popup.css 插件提供的 CSS 样式表与 jquery.magnific-popup.js 文件一起包含在 HTML 代码中。此外，您可以看到创建了一个“打开弹出”超链接；它指向图像文件夹中的 chip.jpg。将 test-popup-link 类分配给

Note

我在这个程序中使用了图像。不要忘记将随书的代码包提供的 images 文件夹复制到您站点的文件夹中。

下面是将插件方法应用于 HTML 文件中定义的超链接的 jQuery 代码。

发电厂 IP . js

$(document).ready(function() {
       $('.test-popup-link').magnificPopup({
            type: 'image'
       });
});

您可以看到，对于带有 test-popup-link 类的超链接，插件的 magnificPopup()方法被应用，并且“type”属性被设置为“image”值。结果，网页上出现一个“打开弹出”链接，如图 11-5(a) 所示。当用户点击超链接时，链接的图像会弹出一个对话框，对话框右上方有一个关闭按钮(见图 11-5(b) )。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-5

(a)打开弹出链接出现在网页上。(b)链接的图像弹出一个对话框

如果您想要显示两个或更多的图像，您需要为每个图像创建指向其各自图像的超链接。下面是完成这项工作的 HTML 代码。

电站 gpopp . 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>
    <link rel="stylesheet" href="magnific-popup.css">
    <script src="jquery.magnific-popup.js"></script>
    <script src="usingpopupjq.js" type="text/javascript"></script>
  </head>
  <body>
     <div class="parent-container">
             <a href="img/chip.jpg">Preprocessor Chip</a>
            <a href="img/chip2.jpg">RISC chip</a>
            <a href="img/chip3.jpg">CISC chip</a>
      </div>
  </body>
</html>

您可以在 HTML 代码中看到定义了三个超链接，每个超链接都指向其各自的图像，该图像位于 images 文件夹中。所有三个超链接都嵌套在

元素中，为了让插件方法可以访问元素及其超链接，元素被赋予了 parent-container: class。

为了将插件的方法应用于包含超链接的

元素，jQuery 代码修改如下。

发电厂 IP . js

$(document).ready(function() {
        $('.parent-container').magnificPopup({
            delegate: 'a', // by clicking on it popup will open
            type: 'image'
       });
});

您可以在 jQuery 代码中看到，对 parent-container: class 的

元素应用了 magnificPopup 方法，将 delegate 属性设置为“a”，并将“type”属性设置为“image”值。

结果，三个超链接出现在浏览器窗口左上角的屏幕上。每个超链接打开它所指向的相应图像(见图 11-6(a) )。点击一个超链接会在一个弹出窗口中显示其图像，窗口右上角有一个关闭按钮，如图 11-6(b) 所示。关闭对话框后，焦点将回到超链接上，您可以单击任何其他超链接来查看与之关联的图像。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-6

(a)三个超链接出现在屏幕的左上角。( b)单击超链接会在弹出窗口中显示其图像

在前面的程序中，单击超链接会使关联的图像显示在弹出对话框中，您可以关闭该对话框。关闭对话框后，您可以单击另一个超链接来查看另一个图像。现在让我们看看如何在弹出对话框中添加“下一个”和“上一个”按钮，这样你就可以轻松地导航到任何图像。

让我们假设您想要显示两个图片库。第一个图像库显示两个图像。第二个图像库显示两个图像和一个视频。HTML 代码修改如下。

电站 gpopp . 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>
    <link rel="stylesheet" href="magnific-popup.css">
    <script src="jquery.magnific-popup.js"></script>
    <script src="usingpopupjq.js" type="text/javascript"></script>
  </head>
  <body>
     <div class="gallery">
              <a href="img/chip.jpg">Preprocessor Chip (gallery #1)</a>
              <a href="img/chip2.jpg">RISC chip (gallery #1)</a>
    </div>
    <div class="gallery">
              <a href="img/chip3.jpg">CISC chip (gallery #2)</a>
              <a href="img/chip4.jpg">EPIC chip (gallery #2)</a>
              <a href="http://bmharwani.com/videos/01javafirstlecturesampleinenglish.mp4" class="mfp-iframe">Open my video</a>
    </div>
  </body>
</html>

您可以看到定义了两个

元素，每个元素都被分配了 gallery 类，该类被分配来自动将附加 CSS 样式表 make 中提到的相应 CSS 样式应用到元素，并使它们在 jQuery 代码中可访问。第一个元素包含了两个超链接，这两个超链接指向将在第一个图像库中显示的两个图像。第二个元素包含三个超链接，其中前两个超链接指向两个图像，第三个超链接指向要在图像库中显示的视频。

下面是显示图库的代码，这些图库显示可以导航到下一个或上一个图像或视频的图像和视频。

【usingopjq . js】

$(document).ready(function() {
        $('.gallery').each(function() { // the containers for all your galleries
              $(this).magnificPopup({
                       delegate: 'a', // the selector for gallery item
                       type: 'image',
                       gallery: {
                              enabled:true
                       }
              });
     });
});

在 jQuery 代码中，可以看到 gallery 类中的

元素被选中。在其中的每一个中，回调函数中的语句都被执行。在回调函数中，对元素调用 magnificPopup 方法，将 delegate 属性设置为 value，“a”，将 type 属性设置为 value，image，将 gallery 属性的 enabled 元素设置为 true。结果，两个 div 元素中的超链接出现在网页左上角的两行中，如图 11-7(a) 所示。您可以单击任何想要弹出其图像的画廊的任何链接。点击图片的超链接后，会弹出一个窗口，如图 11-7(b) 所示。您可以在对话框的右上角看到一个关闭按钮，使您能够关闭图像库并返回到顶部的超链接。此外，您可以在图像的右侧和左侧看到下一个和上一个箭头。使用这些箭头，您可以导航到画廊中的其他图像。图 11-7© 显示了视频如何出现在图库中的输出。点击最后一个图像/视频上的下一个按钮，显示第一个图像/视频。同样，单击第一个图像/视频上的“上一个”按钮会显示最后一个图像或视频。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-7

(a)两个 div 元素中提到的超链接出现在左上角的两行中。(b)单击图库中的链接，在弹出窗口中打开图像。©视频出现在图库中

到目前为止，您已经看到了弹出对话框和图库中的图像。接下来，您将学习在单击图像时缩放图像。为了显示图像的缩略图，HTML 代码修改如下。

电站 gpopp . 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>
    <link rel="stylesheet" href="magnific-popup.css">
    <script src="jquery.magnific-popup.js"></script>
    <script src="usingpopupjq.js" type="text/javascript"></script>
  </head>
  <body>
     <a href="img/chip3.jpg" class="image-link">
             <img src="img/chip3thumnail.jpg" />
    </a>
  </body>
</html>

您可以看到创建了一个显示图像缩略图的超链接。缩略图的文件名是 chip3thumnail.jpg。超链接通过 chip3.jpg 链接到图像的缩放版本。为了应用 CSS 样式并使其在 jQuery 代码中可访问，超链接被分配了 image-link 类。

下面是 jQuery 代码，当单击图像的缩略图时，它会在弹出窗口中显示图像的放大版本。

发电厂 IP . js

$(document).ready(function() {
       $('.image-link').magnificPopup({
            type: 'image',
            mainClass: 'mfp-with-zoom', // this class is for CSS animation below

            zoom: {
                   enabled: true, // By default it's false, so don't forget to enable it
                   duration: 300, // duration of the effect, in milliseconds
                   easing: 'ease-in-out', // CSS transition easing function
                   opener: function(openerElement) {
                          return openerElement.is('img') ? openerElement : openerElement.find('img');
                   }
            }
    });
});

您可以看到带有 image-link 类的超链接被选中，插件方法 magnificPopup 被应用于它，并且 type 属性被设置为 image。mainClass 属性设置为 mfp-with-zoom，以便在缩放图像时应用动画。zoom 属性的 enabled 元素设置为 true，动画持续时间设置为 300 毫秒，缓动过渡设置为渐强渐弱。opener 属性设置为指向返回布尔值的函数，如果操作应用于 img 元素，则为 true。

当应用运行时，会显示一个缩略图(参见图 11-8(a) )。点击缩略图会弹出一个大图，如图 11-8(b) 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-8

(A)出现一个缩略图。(b)单击缩略图在弹出窗口中显示其缩放版本

11.6 11-5.使用 iCheck 插件显示动态复选框和单选按钮

iCheck 是由 Damir Sultanov 开发的 jQuery 插件。它提供了高度可定制的复选框和单选按钮。在不同的浏览器和设备上都有相同的复选框和单选按钮，无论是移动设备还是台式机。这些输入也适用于 iOS、Android、黑莓、Windows Phone 和亚马逊 Kindle 等触摸设备。它支持 jQuery 和 Zepto，并提供 32 个选项来定制复选框和单选按钮，11 个回调来处理更改，9 个方法以编程方式进行更改，等等。

你可以在 https://plugins.jquery.com/icheck/ 找到 iCheck 插件的完整信息。该页面显示了演示、下载、文档、主页等的链接。单击“立即下载”链接下载代码。zip 格式的代码包被下载到您的计算机上。解压缩该文件，并将 icheck.js 文件复制到您站点的文件夹中。从 skins 子文件夹中，将 minimal、futurico 和 line 文件夹复制到您站点的文件夹中。这些文件夹包含将样式应用于复选框和单选按钮的 CSS 样式。

问题

您希望显示一个网页，其中显示一些食品和付款方式。用户可以选择任意数量的食品和付款方式。因为用户可能选择不止一个食品，所以食品通过复选框显示。因为用户只能选择一种付款方式，所以付款方式通过单选按钮显示。通过应用 iCheck 插件，可以使这些复选框和单选按钮看起来更动态。

解决办法

您希望显示三种食品和两种付款方式选项。下面是显示三个复选框和两个单选按钮的 HTML 代码。

发电厂尾箱. 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>
    <link href="minimal/minimal.css" rel="stylesheet">
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="icheck.js" type="text/javascript"></script>
    <script src="usingicheckjq.js" type="text/javascript"></script>
  </head>
  <body>
    <p> Select your fast food item: </p>
      <label><input type="checkbox"  name="food" value="Pizza">Pizza</label><br/>
      <label><input type="checkbox" name="food" value="Hot Dog">Hot Dog</label><br/>
      <label><input type="checkbox"  name="food" value="Burger" checked>Burger</label><br/>
<p> Select the payment method: </p>
<form id="pay">
           <label><input type="radio" name="iCheck"  value="Payment By Card">Payment By Card</label><br/>
           <label><input type="radio" name="iCheck"   value="Payment By Cash" checked>Payment By Cash</label><br/>
</form><br/>
      <input type="button" id="btnSubmit" value="Submit" />
  </body>
</html>

通过访问 minimal 文件夹中的 minimal.css 文件，可以对复选框和单选按钮应用不同的 css 样式。此外，插件的 icheck.js 文件包含在 jQuery 文件之后。

一个

元素显示“选择您的快餐项目:”文本。在段落元素下面，三对和元素显示了三个复选框。这三个复选框分别被命名为 food ，并分别被赋予披萨、热狗或汉堡值。checked 属性应用于 Burger 复选框，使其默认显示为选中状态。

单选按钮出现在复选框之后。定义了另一个

元素，带有文本“选择付款方式:”。因为只能选择一个单选按钮，所以两个按钮都必须嵌套在一个

元素中。要在 jQuery 代码中访问, 元素被赋予 id pay。使用元素，两对和元素被定义来显示单选按钮和它们各自的标签。因为单选按钮旨在显示不同的支付方式，所以这两个单选按钮的值和标签分别设置为通过卡支付和通过现金支付。为了在 jQuery 代码中访问它们，这两个单选按钮都被赋予了名称 iCheck。此外，checked 属性应用于第二个单选按钮，因为您希望它默认处于选中状态。最后，一个提交按钮被分配给它。

下面是将不同的样式和其他维度应用于复选框和单选按钮的 jQuery 代码。

发电厂尾箱. js

$(document).ready(function() {
     $('input').iCheck({
              checkboxClass: 'icheckbox_minimal',
              radioClass: 'iradio_minimal',
              increaseArea: '20%' // optional
       });
       $("#btnSubmit").click(function() {
          var selected = [];
                      $.each($("input[name='food']:checked"), function(){
                               selected.push($(this).val());
                 });
                 paymethod =  $('input[name="iCheck"]:checked',  '#pay').val();
                 selected.push(paymethod)
                 alert("Selected food items and pay method is: " + selected.join(", "));
        });
});

您可以看到，在所有输入元素上，插件的 iCheck 方法被执行，以将所需的 CSS 样式应用于单选按钮和复选框。当单击 id 为 btnSubmit 的按钮时。换句话说，当单击提交按钮时，就会发生 click 事件。它的回调函数在定义“selected”的地方执行。所有被选中的复选框的值被推送(即，添加到“选择的”数组)。无论选择了披萨、热狗还是汉堡，它的值都会添加到“selected”数组中。

在观察到所有复选框之后，单选按钮被观察到(即，所有名为 iCheck 的输入元素被观察到)。如果选中了其中的任何一个，就会访问它的值并将其赋给 paymethod 变量。回想一下，所有的单选按钮都被命名为 iCheck。无论用户是否选中了“用卡支付”按钮或“用现金支付”单选按钮，相应的支付方法都被分配给 paymethod 变量。paymethod 中的值被推送到“selected”数组中，这意味着它包含用户选择的食物项目和用户选择的支付方法。

运行该应用时，会出现一个屏幕，要求您选择您想要的食物并选择付款方式，如图 11-9(a) 所示。用户选择的任何食物和支付方式都存储在“selected”数组中。最后，利用告警对话框将该数组中的所有信息显示在屏幕上，如图 11-9(b) 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-9

(a)选择食物项目的屏幕和付款方式之一出现。(b)通过警告对话框显示选择的食品和付款方式

在这个 HTML 程序中，您使用了 minimal 文件夹中的 minimal.css 样式表。这个 iCheck 插件为你提供了许多不同的 CSS 样式表，让复选框和单选按钮看起来更有吸引力，更有活力。您可以在 HTML 程序的 futurico 文件夹中使用 futurico.css 样式表。为此，修改 HTML 文件中的语句，以包含插件的 CSS 样式表。

<link href="futurico/futurico.css" rel="stylesheet">

要将 futurico.css 文件中提到的样式应用于复选框和单选按钮，您需要在 jQuery 文件中进行更改。回想一下 jQuery 代码，下面两行使用了最少的样式类。

              checkboxClass: 'icheckbox_minimal',
              radioClass: 'iradio_minimal',

要应用 futurico 样式类而不是最小样式类，请修改 jQuery 代码中的前两行，如下所示。

              checkboxClass: 'icheckbox_futurico',
              radioClass: 'iradio_futurico',

就这样。不需要其他更改。在运行 HTML 程序时，您可以看到空复选框不再是白色而是黑色。此外，选中的复选框为绿色。同样，单选按钮也是黑色的。选中时，单选按钮有一个绿色小圆圈(见图 11-10 )。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-10

空复选框为黑色，选中时为绿色。单选按钮是黑色的，选中时，它们会包含一个绿色的小圆圈

iCheck 插件还在 line 文件夹中提供了一个名为 line.css 的 CSS 样式表，它通常使用完整的行来显示复选框或单选按钮。复选框和单选按钮标签共享相同的背景(即，复选框的背景颜色)，并且其标签是相同的。同样，单选按钮及其标签的背景色也是一样的。为了正确地应用样式类，元素必须位于复选框或单选按钮元素之下(这与之前复选框和单选按钮嵌套在元素中的方式不同)。下面是修改后的 HTML 代码。

发电厂尾箱 2.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>
    <link href="line/line.css" rel="stylesheet">
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="icheck.js" type="text/javascript"></script>
    <script src="usingicheck2jq.js" type="text/javascript"></script>
  </head>
  <body>
       <p> Select your fast food item: </p>
      <input type="checkbox"  name="food" value="Pizza">
      <label>Pizza</label><br/>
       <input type="checkbox" name="food" value="Hot Dog">
      <label>Hot Dog</label><br/>
       <input type="checkbox"  name="food" value="Burger" checked>
      <label>Burger</label><br/>
       <p> Select the payment method: </p>
       <form id="pay">

           <input type="radio" name="iCheck"  value="Payment By Card">
           <label>Payment By Card</label><br/>
           <input type="radio" name="iCheck"   value="Payment By Cash" checked>
           <label>Payment By Cash</label><br/>
       </form><br/>
      <input type="button" id="btnSubmit" value="Submit" />
  </body>
</html>

您可以在 HTML 代码中看到,

元素显示文本，要求用户选择想要的食物。另外，请注意元素跟在复选框和单选按钮元素后面。代码的其余部分与前面的 HTML 代码相同。

要应用 line.css 样式表文件中提到的样式类，必须对 jQuery 代码进行如下修改。

发电厂尾箱. js

$(document).ready(function() {
      $('input').each(function(){
              var self = $(this),
                label = self.next(),
                label_text = label.text();

              label.remove();
              self.iCheck({
                     checkboxClass: 'icheckbox_line',
                     radioClass: 'iradio_line',
                     insert: '<div class="icheck_line-icon"></div>' + label_text
              });
       });
       $("#btnSubmit").click(function() {
          var selected = [];
                      $.each($("input[name='food']:checked"), function(){
                               selected.push($(this).val());
                 });
                 paymethod =  $('input[name="iCheck"]:checked',  '#pay').val();
                 selected.push(paymethod)
                 alert("Selected food items and pay method is: " + selected.join(", "));
        });
});

您可以在代码中看到，所有的输入元素都被选中，并且对每个输入元素执行一个回调函数。在回调函数中，元素的文本被访问并赋给 label_text 变量。之后，插件的 iCheck 方法被应用于元素，相应的样式类被应用于复选框和单选按钮元素。除此之外，用 label_text 变量中的文本定义了一个

元素。为了自动应用特定的样式，icheck_line-icon 类被分配给元素。换句话说，每个复选框和单选按钮都被一个具有特定类的元素所替代。代码的其余部分是相同的，它检测选中的复选框和单选按钮，并显示通过复选框选择的食品和通过单选按钮选择的支付方法。选中的选项通过警告对话框显示，如图 11-11 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-11

每个复选框和单选按钮都由一个具有特定类的

元素替换。样式类应用于复选框和单选按钮元素。选定的选项通过警告对话框显示

11.7 11-6.使用 blueimp 图库插件创建图库和轮播

blueimp Gallery 插件是由 Sebastian Tschan 创建的。它是一个支持触摸、响应迅速、可定制的图像和视频库、旋转木马和灯箱，针对移动和桌面应用进行了优化。它支持滑动、鼠标和键盘导航以及过渡效果等功能。它很容易使用。

你可以在 https://plugins.jquery.com/blueimp-gallery/ 找到 blueimp 图库插件的完整信息。该页面显示了演示、下载、文档、主页等的链接。单击“立即下载”链接下载代码。zip 格式的代码包被下载到您的计算机上。解压文件。从 js 子文件夹中，将 blueimp-gallery.js 文件复制到您站点的文件夹中。从 css 子文件夹中，将 blueimp-gallery.css 文件复制到您站点的文件夹中。现在，您可以在您的网页上使用 blueimp Gallery 插件了。

Note

我用这个插件制作食谱时使用了图像，所以你需要复制本书代码包中提供的图像文件夹，并复制你站点文件夹中的图像文件夹。

问题

你正在学习使用 blueimp Gallery 插件制作一个图片轮播，但这是一个循序渐进的方法。首先，你学习制作一个图库。假设您有三张图片，并且您想使用 blueimp Gallery 插件创建一个图片库。最初，会显示图像的缩略图。单击任何缩略图都会以图像库的形式显示其较大版本，并带有“下一个”和“上一个”按钮，可以导航到任何图像。此外，正在显示的图像的标题出现在图像库的左上角。

解决办法

假设包含缩略图和缩放图像的图像文件夹被复制到您站点的文件夹中，创建一个显示三个超链接的 HTML 文件，如下所示。

【usgblueimp . 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>

    <link href="blueimp-gallery.css" rel="stylesheet">
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="blueimp-gallery.js" type="text/javascript"></script>
    <script src="usingblueimpjq.js" type="text/javascript"></script>
  </head>
  <body>
      <div
            id="blueimp-gallery"
            class="blueimp-gallery blueimp-gallery-controls"
            aria-label="image gallery"
            aria-modal="true"
            role="dialog"
>
            <div class="slides" aria-live="polite"></div>
            <h3 class="title"></h3>
            <a
                   class="prev"
                   aria-controls="blueimp-gallery"
                   aria-label="previous slide"
                   aria-keyshortcuts="ArrowLeft"
            ></a>
            <a
                   class="next"
                   aria-controls="blueimp-gallery"
                   aria-label="next slide"
                   aria-keyshortcuts="ArrowRight"
            ></a>
            <a
                   class="close"
                   aria-controls="blueimp-gallery"
                   aria-label="close"
                   aria-keyshortcuts="Escape"
            ></a>
            <a
                   class="play-pause"
                   aria-controls="blueimp-gallery"
                   aria-label="play slideshow"
                   aria-keyshortcuts="Space"
                   aria-pressed="false"
                   role="button"
            ></a>
            <ol class="indicator"></ol>
     </div>
     <div id="links">
            <a href="img/chip.jpg" title="Preprocessor">
                   <img src="img/chipthumnail.jpg" alt="Preprocessor" />
            </a>
            <a href="img/chip2.jpg" title="RISC chip">
                   <img src="img/chip2thumnail.jpg" alt="RISC chip" />
            </a>
            <a href="img/chip3.jpg" title="CISC chip">

                   <img src="img/chip3thumnail.jpg" alt="CISC chip" />
            </a>
     </div>
   </body>
</html>

CSS 样式表文件 blueimp-gallery.css 包含在 HTML 代码中。blueimp-gallery.js 文件包含在 HTML 文件中。除此之外，您可以看到一个

元素被定义并被分配了链接”。id 被分配给 CSS 样式表中提到的自动应用样式，并使其在 jQuery 代码中可访问。在元素中有三个超链接。这三个超链接显示了三个缩略图，并链接到它们的大图。所有

下面是显示这三个缩略图并在单击任何缩略图时显示图像滑块所需的 jQuery 代码。

usgblueippjq . js

$(document).ready(function() {
       document.getElementById('links').onclick = function (event) {
              event = event || window.event
              var target = event.target || event.srcElement
              var link = target.src ? target.parentNode : target
              var options = { index: link, event: event }
              var links = this.getElementsByTagName('a')
              blueimp.Gallery(links, options)
       }
});

当运行程序时，你会在浏览器窗口的左上角看到三个缩略图，如图 11-12(a) 所示。点击任一图像，显示其缩放版本，标题在左上角，如图 11-12(b) 所示。图像上还有左右按钮。您可以导航到任何图像。例如，在最后一个图像上单击“下一个”按钮会再次显示第一个图像。同样，单击第一个图像上的“上一个”按钮会显示最后一个图像。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-12

(a)三个缩略图出现在左上角。(b)单击任何图像都会显示其缩放版本及其标题

拉伸图像

有时，您想在保持图像纵横比的同时，将图像库中较小的图像拉伸到图库容器的尺寸。为此，将 blueimp-gallery-contain CSS 类添加到 gallery 小部件中。也就是修改 HTML 文件中最外层的

元素的类。在 HTML 程序中，您会看到最外层的类是 blue imp-gallery blue imp-gallery-controls。这几行重复如下，供您参考。

<div
  id="blueimp-gallery"
  class="blueimp-gallery blueimp-gallery-controls"

通过修改前面的语句，将元素的类更改为 blue imp-gallery blue imp-gallery-contain，如下所示。

<div
  id="blueimp-gallery"
  class="blueimp-gallery blueimp-gallery-contain"

不需要其他更改。运行该程序时，您会在浏览器窗口的左上角看到三个缩略图。点按任何缩略图图像都会放大图像，并保持其纵横比不变。图像的高度等于图库的高度。图像上的左右按钮使您能够导航到任何图像(参见图 11-13 )。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-13

单击的缩略图显示为完全拉伸

制作图像旋转木马

blueimp Gallery 插件可以让你用最少的努力制作一个图片轮播。图像转盘是在浏览器窗口中心显示图像的转盘。几秒钟后，该图像自动滑向浏览器窗口的左边界并消失。接下来，另一个图像从浏览器窗口的右边框出现，向左滑动，并停在浏览器窗口的中心。同样，几秒钟后，该图像自动滑向左边界，程序继续。要制作一个图像轮播，其中每个图像不断滑动，您需要修改 HTML 代码如下。

【usgblueimp . html】

按如下方式修改 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>
    <link href="blueimp-gallery.css" rel="stylesheet">
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="blueimp-gallery.js" type="text/javascript"></script>
    <script src="usingblueimpjq.js" type="text/javascript"></script>
  </head>
  <body>
       <div
            id="blueimp-gallery-carousel"
            class="blueimp-gallery blueimp-gallery-carousel"
            aria-label="image carousel"
      >
            <div class="slides" aria-live="off"></div>
            <h3 class="title"></h3>
            <a
                   class="prev"
                   aria-controls="blueimp-gallery-carousel"
                   aria-label="previous slide"
            ></a>
            <a
                   class="next"
                   aria-controls="blueimp-gallery-carousel"
                   aria-label="next slide"
            ></a>
            <a
                   class="play-pause"
                   aria-controls="blueimp-gallery-carousel"
                   aria-label="play slideshow"
                   aria-pressed="true"
                   role="button"
            ></a>
            <ol class="indicator"></ol>
     </div>
     <div id="links">
            <a href="img/chip.jpg" title="Preprocessor">
                   <img src="img/chipthumnail.jpg" alt="Preprocessor" />
            </a>
            <a href="img/chip2.jpg" title="RISC chip">
                   <img src="img/chip2thumnail.jpg" alt="RISC chip" />
            </a>
            <a href="img/chip3.jpg" title="CISC chip">
                   <img src="img/chip3thumnail.jpg" alt="CISC chip" />
            </a>
     </div>
</body>
</html>

您可以在 HTML 代码中看到，只要使用了 blueimp-gallery 类，它就会被 blueimp-gallery-carousel 类替换，这样插件的 CSS 样式表中提到的样式类就会自动应用于图像超链接，相应的 jQuery 代码也可以应用于它们。

要将图像超链接转换成图像轮播，jQuery 代码需要修改如下。

usgblueippjq . js

$(document).ready(function() {
       document.getElementById('links').onclick = function (event) {
              event = event || window.event
              var target = event.target || event.srcElement
              var link = target.src ? target.parentNode : target
              var options = { index: link, event: event }
              var links = this.getElementsByTagName('a')
              blueimp.Gallery(links, options)
       }
       blueimp.Gallery(document.getElementById('links').getElementsByTagName('a'), {
              container: '#blueimp-gallery-carousel',
              carousel: true
       })
});

当您运行该程序时，您会在浏览器屏幕的中央找到第一幅图像。几秒钟后，该图像滑向浏览器的左边缘并消失。第二个图像出现在浏览器的右边缘，向左滑动，停在浏览器窗口的中央。几秒钟后，第二个图像滑向浏览器窗口的左边缘，然后消失。第三个图像从右边缘开始出现，向左滑动，停在浏览器窗口的中央。这一过程无休止地继续下去。

如果您点按任何图像，会出现“下一个”和“上一个”按钮。您可以使用它们导航到任何图像(参见图 11-14 )。当你停止导航时，图像自动滑动开始。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-14

图像一个接一个地出现在浏览器屏幕的中央。点按任何图像后，会出现“下一个”和“上一个”按钮

11.8 11-7.使用 jQuery 验证插件验证表单

jQuery 验证插件 v1.19.3 由 jQuery 团队的成员 rn Zaefferer 编写和维护。

这个 jQuery 插件为客户端表单验证提供了一种简单的技术，并提供了几个定制选项来满足您的需求。该插件有几个验证方法来验证电子邮件地址、URL、用户名等，所有方法都有默认的英语错误消息和 37 种其他语言的翻译。该插件还提供了一个 API 来编写你自己的方法。全部捆绑

你可以在 https://jqueryvalidation.org 找到更多关于 jQuery 验证插件的信息。该页面显示了演示、下载、文档、GitHub 库等的链接。单击“立即下载”链接，然后单击“源代码”链接下载代码。zip 格式的代码包被下载到您的计算机上。解压文件。从 dist 子文件夹中，将 jquery.validate.js 文件复制到您站点的文件夹中。现在，您可以在您的网页上使用 blueimp Gallery 插件了。

问题

您有一个表单，要求用户输入用户名、电子邮件地址、URL 和注释。您希望使用 jQuery 验证插件来验证这个表单。

解决办法

您需要一个 HTML 表单来提示用户输入他们的姓名、电子邮件地址、URL 和评论。下面是显示一个要求用户输入这些信息的表单的 HTML 代码。

工厂形验证. 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="jquery.form.js" type="text/javascript"></script>
    <script src="usingformvalidatejq.js" type="text/javascript"></script>
  </head>
  <body>
     <form class="cmxform" id="myform" method="get" action="">
            <fieldset>
              <legend>Please provide your name, email address and a comment</legend>
              <p>
                     <label for="cname">Name (required, at least 2 characters)</label>
                     <input id="cname" name="name" minlength="2" type="text" required>
              </p>
              <p>
                     <label for="cemail">E-Mail (required)</label>
                     <input id="cemail" type="email" name="email" required>
              </p>
              <p>
                     <label for="curl">URL (optional)</label>
                     <input id="curl" type="url" name="url">
              </p>
              <p>
                     <label for="ccomment">Your comment (required)</label>
                     <textarea id="ccomment" name="comment" required></textarea>
              </p>
              <p>
                     <input class="submit" type="submit" value="Submit">
              </p>
            </fieldset>

     </form>
  </body>
</html>

可以看到一个表单是用 id、commentForm 和 cmsform 类定义的。id 和类被分配来自动应用 CSS 样式，并使其在 jQuery 代码中可访问。在

元素中是元素，它对表单的元素进行分组。此外，嵌套元素周围会绘制一个框。“请提供您的姓名、电子邮件地址和评论”显示在使用元素的框的轮廓中。然后，通过和元素对询问用户需要的任何信息，每一对都被包装在

元素中。和元素要求用户输入姓名、电子邮件地址、用户网站的 URL 和评论。在数据必不可少的情况下,元素与“required”属性一起使用。

minlength 属性与元素一起使用，要求输入用户名，以通知用户名称至少需要两个字符。用于搜索姓名、电子邮件地址、URL 和评论的元素分别被赋予唯一的 id、cname、cemail、curl 和 ccomment。插件方法正是通过这些 id 来验证表单的这些元素。由于 input 元素设置为 optional(即，用户也可以将输入框留空)，因此不会对 URL 应用任何验证。

应用表单验证的 jQuery 代码如下。

发电厂 gformvalidateq . js

$(document).ready(function() {
      $("#myform").validate({
            submitHandler: function(form) {
                   form.submit();
            }
      });
});

可以看到 id 为 myform 的表单被访问，插件的 validate 方法被调用。当用户单击 Submit 按钮时，submitHandler 调用回调函数来提交表单。但是，如果所有的元素都通过验证，则不会提交表单。如果元素不符合标准，会出现一个弹出对话框，显示错误。当用户开始输入元素时，弹出对话框自动消失。如果用户单击提交按钮，并且任何元素未通过验证，则弹出窗口再次出现。

在运行 HTML 程序时，底部有四个输入框和一个提交按钮。输入框要求用户输入用户名、电子邮件地址、URL 和评论(见图 11-15(a) )。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 11-15

(a)出现四个输入框和一个提交按钮。(b)出现错误弹出窗口，要求输入至少两个字符作为名称。©输入无效电子邮件地址时弹出错误提示。(d)如果注释框为空，将出现一个错误弹出窗口，要求填写该框

输入姓名时必须至少输入两个字符，因此会出现一个错误弹出窗口，要求用户在姓名框中不输入任何内容或仅输入一个字符时输入至少两个字符(见图 11-15(b) )。

如果用户没有输入电子邮件地址或者输入了没有@符号的无效电子邮件地址，则会弹出一个错误，要求输入有效的电子邮件地址(参见图 11-15© )。如果 URL 框为空或输入了任何无效的 URL，则不会出现错误，因为不会对 URL 框执行任何验证。因为注释框不能为空，必须在注释框中输入一些内容，如果注释框为空，一个错误弹出窗口要求用户填写注释框(参见图 11-15(d) )。

11.9 11-8.总结

在这一章中，你学习了如何创建一个插件来改变一个元素的字体大小，字体风格，前景色和背景色。您还学习了如何制作可链接的插件。您还学习了根据需要定制插件。您学习了如何使用插件，包括显示图像滑块的 Magnific Popup 插件、显示动态复选框和单选按钮的 iCheck 插件、创建图像库和轮播的 blueimp Gallery 插件以及验证表单的 jQuery validation 插件。

下一章重点介绍 CSS 的使用。您将学习使用 CSS 来区分 HTML 元素，对嵌套元素应用样式，缩进段落，以及对段落应用首字母大写。您还学习了如何应用 CSS 来消除标题和段落之间的间隙、对标题文本应用样式、缩进多个段落的第一行、创建带有悬挂缩进的段落以及创建带边框的引用。在经历了更多的食谱后，使用 CSS 的概念变得更加清晰。

十二、使用 CSS

这最后一章提供了一套严重依赖 CSS 的食谱。这些食谱补充了本书中的其他食谱，因为 CSS 永远不会远离 JavaScript 开发人员的工作。我包含了一些我最常用的 CSS 技术，以便在您开发自己的 web 应用时快速参考。

本章包括以下配方。

区分 HTML 元素
将样式应用于嵌套在另一个元素中的元素
缩进段落
对段落应用首字母大写
消除标题和段落之间的间隙
对标题文本应用样式
缩进多个段落的首行
创建带有悬挂缩进的段落
创建带边框的引用语
使用图像创建重要报价
将列表属性应用于列表项目
仅将样式应用于选定的列表项
在列表项之间放置分隔线
将图像标记应用于列表
创建内嵌列表
将样式应用于超链接和邮件
为 HTML 元素分配不同的维度
放置 HTML 元素
创建多栏布局
在图像周围环绕文本
在图像后面放置投影
当鼠标移动到链接上时更改光标
在特定区域显示一长段文本
制作圆角柱
应用文本装饰
缩放图像
设置背景图像
使背景图像在浏览器中居中
使背景图像静止

12.1 区分 HTML 元素

问题

当您想要对 HTML 文件的两个不同段落或两个不同 h1 元素应用不同的样式时，您必须通过为它们分配不同的类来区分它们。此外，您需要编写可以单独应用于这些类的样式规则。

解决办法

首先编写一个包含两个段落和两个 h1 元素的 HTML 文件。为了区分它们，你给它们分配不同的类。段落元素分别被分配 feature1 和 feature2 类。h1 元素分别被指定为 feature2 和 feature3 类。

Distinguishhtml.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>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="distinguishhtmljq.js" type="text/javascript"></script>
  </head>
  <body>

     <p class="feature1">Styles make the formatting job much easier and efficient.</p>
     <p class="feature2">To give an attractive look to web sites, styles are heavily used.</p>
     <h1 class="feature2">Using jQuery</h1>
    <h1 class="feature3">Power of selectors</h1>
  </body>
</html>

要将样式应用于不同类的 HTML 元素，需要在样式表中编写以下样式规则。

Style.css

.greencolor{color:green;font-style:italic}
.highlight{background-color:aqua;color:blue;font-family:arial;}
.redandbold{color:red;font-family:arial;font-weight:bold}

下面是将样式规则应用于段落和 H1 元素的 jQuery 代码。

区分 htmljq.js

$(document).ready(function() {
  $('p.feature1').addClass('greencolor');
  $('.feature2').addClass('highlight');
  $('h1.feature3').addClass('redandbold');
});

它是如何工作的

第一条语句将绿色中定义的属性仅应用于段落元素以及属于 feature1 类的元素(即以

标签开头的元素)。第二条语句将高亮样式规则中定义的属性应用于 feature2 类中的任何 HTML 元素。在 HTML 文件中，一个段落元素和一个 h1 元素属于 feature2 类(由

和

标签表示)，因此该规则中定义的属性适用于这两个元素。第三条语句将 feature3 样式规则中定义的属性仅应用于属于 feature3 类的 h1 元素。输出如图 12-1 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-1

不同的类应用于< p >和< h1 >标签

12.2 将样式应用于嵌套在另一个元素中的元素

问题

有时，span 元素嵌套在另一个具有特定 id 或类的 HTML 元素中，您需要对该嵌套的 span 元素应用样式。

解决办法

在以下 HTML 文件中，您定义了要素类的段落元素。在这个段落元素中，定义了一个 span 元素。

Stylenested.tml

<!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>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="stylenestedjq.js" type="text/javascript"></script>
  </head>
  <body>
     <p class="feature">Styles make the formatting job much easier and efficient. <span>To give an attractive look to web sites,</span> styles are heavily used.</p>.
  </body>
</html>

应用于要素类的段落元素和嵌套在其中的 span 元素的样式规则是在样式表中编写的，可能如下所示。

Style.css

.greencolor{color:green;font-style:italic}
.highlight{background-color:aqua;color:blue;font-family:arial;}

将样式应用于 feature1 类的段落元素和嵌套在要素类的段落元素内的 span 元素。下面是 jQuery 代码。

style nestedjq . js

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

它是如何工作的

首先，让我们看看你是如何定义 CSS 样式的。

.feature{property:value; property:value;...}

它用 class="feature "定义了一个可以应用于任何 HTML 元素的样式。

.feature span {property:value; property:value;...}

它定义了一个样式，该样式可以应用于嵌套在任何 HTML 元素中的 span 元素。

p.feature span {property:value; property:value;...}

它使用 class="feature "定义了一个样式，该样式可以应用于嵌套在段落元素内的 span 元素。

feature1 span.feature2 {property:value; property:value;...}

它定义了一个可以应用于 span 元素的样式，其中 class="feature2 "嵌套在 class="feature1 "的任何 HTML 元素中。

p.feature1 span.feature2 {property:value; property:value;...}

它定义了一个样式，该样式可以应用于 span 元素，其中 class="feature2 "嵌套在 paragraph 元素中，class="feature1 "。

第一个 jQuery 语句使用 class="feature "将 greencolor 中定义的样式属性应用于段落元素。第二条语句将突出显示样式规则中定义的属性应用于在 paragraph 元素中定义的 span 元素，该元素带有 class="feature "。换句话说，样式应用于包含在和标记之间的文本区域，这些标记是在具有 class="feature "的段落元素中定义的。样式应用的输出如图 12-2 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-2

将样式应用于嵌套在另一个 HTML 元素中的 span 元素

12.3 缩进段落

问题

在一个 HTML 文件中有三个段落，你想在三个不同的层次缩进它们。

解决办法

下面是包含这三个段落的 HTML。

Indentingparagraph.thml

  <!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>
    <link rel="stylesheet" href="styleindenting.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="indentingparagraphjq.js" type="text/javascript"></script>
  </head>
  <body>
     <p class="feature1">Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. Styles can be written within HTML document or can be attached externally. External styles are considered better</p>
     <p class="feature2">JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.</p>
     <p class="feature3"> jQuery Selectors are used for selecting the area of the document where we want to apply styles. JQuery has the power of handling events also meaning we can apply styles when a particular action takes place</p>
  </body>
</html>

您可以看到这三个段落被分配了三个不同的类名:feature1、feature2 和 feature3。您正在使用 margin 属性来缩进这些段落。下面是写在外部样式表中的样式规则。

Styleindenting.css

.indent1{
    margin-left:10%;
}
.indent2{
    margin-left:20%;
}
.indent3{
    margin-left:30%;
}

要将样式规则应用于这三个段落，您需要编写以下 jQuery 代码。

indenting 僇 jq.js

$(document).ready(function() {

  $('p.feature1').addClass('indent1');
  $('p.feature2').addClass('indent2');
  $('p.feature3').addClass('indent3');
});

它是如何工作的

第一条语句从 HTML 文件中选择 feature1 类的 paragraph 元素，并对其应用 indent1 样式规则中定义的属性。同样，第二个和第三个语句选择 feature2 类和 feature3 类的段落元素，并分别应用 indent2 和 indent3 样式规则中定义的属性。输出如图 12-3 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-3

缩进三个不同层次的三个段落

12.4 对段落应用首字母大写

问题

您希望将段落的第一个字符作为首字母大写。首字母大写可以是不同的字体，不同的颜色，或者你甚至可以使用图片作为首字母大写。

解决办法

让我们考虑下面这个只有一个段落元素的 HTML 文件。

Initialcap.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>
    <link rel="stylesheet" href="styleinitialcap.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="initialcapjq.js" type="text/javascript"></script>
  </head>
  <body>

     <p><span class="cap">S</span>tyles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. Styles can be written within HTML document or can be attached externally. External styles are considered better
  </body>
</html>

下面是您应用的样式规则，写在样式表中。

style initial cap . CSS

.initialcap{
     font-size: 2em;
}

下面是将样式规则应用于名为 cap class 的 span 元素的 jQuery 代码。

首字母 capjq.js

$(document).ready(function() {
  $('span.cap').addClass('initialcap');
});

它是如何工作的

您可以在 HTML 中看到，为了将段落的第一个字符与正文的其余部分区分开来，它被包含在一个 span 标记中，并被分配了一个 cap 类。对于这个 cap 类，可以通过 jQuery 代码应用样式规则。你可以看到第一个字符的字体大小是默认字体(段落其余部分)的两倍，如图 12-4 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-4

段落的第一个字符设置为首字母大写

您还可以更改第一个字符的前景色和背景色，如下面的样式规则所示。

style initial cap . CSS

.initialcap{
       font-size:2em;
       background-color:black;
       color:white;
}

12.5 消除标题和段落之间的间隙

问题

每当您将标题应用于任何段落时，标题和段落之间都会有间隙。你想消除这个差距。

解决办法

下面是标题和段落的 HTML。

Removinggap.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>
    <link rel="stylesheet" href="styleremovinggap.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="removinggapjq.js" type="text/javascript"></script>
  </head>
  <body>

      <h3>Formatting Makes Attractive</h3>
      <p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. Styles can be written within HTML document or can be attached externally. External styles are considered better</p>
  </body>
</html>

下面是去除段落和标题之间间隙的样式规则。

Styleremovinggap.css

.heading{
     margin:0;
     padding:0;
}

p{
     margin:0;
     padding:0;
}

下面是将样式应用于 h3 元素的 jQuery 代码。

删除 apjq.js

$(document).ready(function() {
  $('h3').addClass('heading');
});

它是如何工作的

没有应用任何 jQuery 代码的 HTML 的原始输出如图 12-5 所示。你可以看到标题和段落之间有很大的空隙。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-5

段落和标题之间通常有间隔

在这个样式表中，标题类选择器应用于 h3 元素，p{}类型选择器直接应用于段落元素。

在对段落和标题应用样式时，你会发现它们之间的间隙被消除了，如图 12-6 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-6

段落和标题之间通常的空白被删除

12.6 对标题文本应用样式

问题

您希望将样式应用于文本的标题。

解决办法

你在食谱 12-4 中使用相同的 HTML，它包含一个段落和一个标题。为了突出标题，你首先需要消除标题和段落之间的间隙。然后，你把它变成斜体，并给它加上边框。您在样式表中编写以下样式规则。

Stylestoheading.css

.heading{
     margin:0;
     padding:0;
     font-style: italic;
     border-top:5px solid black;
     border-bottom:5px solid black;
}

p{
     margin:0;
     padding:0;
}

让我们用下面的 jQuery 代码将该样式应用于 h3 元素。

Stylestoheadingjq.js

$(document).ready(function() {
  $('h3').addClass('heading');
});

它是如何工作的

样式规则中的边距和填充属性消除了标题和段落之间通常的间隙，字体样式使标题以斜体显示。border 属性为标题附加上边框和下边框。

应用样式后的段落标题如图 12-7 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-7

带有样式化标题的段落

12.7 缩进多个段落的第一行

问题

您想要缩进文档中段落的第一行。

解决办法

让我们写一些 HTML，里面有几个段落，如下。

indeting first line . 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>
    <link rel="stylesheet" href="styleindentfirstline.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="indentingfirstlinejq.js" type="text/javascript"></script>
  </head>
  <body>
      <p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used

. Styles can be written within HTML document or can be attached externally. External styles are considered better</p>
      <p>jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.</p>
      <p> jQuery Selectors are used for selecting the area of the document where we want to apply styles. JQuery has the power of handling events also meaning we can apply styles when a particular action takes place</p>
  </body>
</html>

HTML 显示三个段落，没有任何缩进。要在段落的第一行应用缩进，需要使用 text-indent 属性。下面是样式表中的样式规则。

style indent linetype . CSS

.firstindent{
     text-indent:10%;
}

下面是将 firstindent 应用于 HTML 文件的所有段落元素的 jQuery 代码。

indetingfirstlinejq . js

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

它是如何工作的

应用该样式时，HTML 文件的段落第一行缩进，如图 12-8 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-8

首行缩进的段落

12.8 创建带悬挂缩进的段落

问题

您希望在文档中段落的第一行有悬挂缩进。

解决办法

在这个食谱中，你使用你在食谱 12-6 中使用的相同的 HTML。HTML 有三个段落元素。

您可以利用 text-indent 和 margin-left 属性来创建悬挂缩进。以下是风格法则。

stylehangindent . CSS

.hangingindent{
    text-indent:-10%;
    margin-left:10%;
}

下面是将悬挂缩进样式规则应用于段落的 jQuery 代码。

hangingindenttjq . js

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

它是如何工作的

通过将 margin-left 属性设置为 10%,可以将段落设置为从浏览器窗口左侧开始，为浏览器窗口宽度的 10%(即，整个段落向右移动浏览器窗口宽度的 10%)。通过将 text-indent 的值设置为–10%,您可以使段落的第一行向左移动，移动量等于浏览器窗口宽度的 10 %,从而使其看起来像悬挂的缩进。

在应用样式时，每段的第一行都有一个悬挂式缩进，如图 12-9 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-9

首行缩进的段落

12.9 创建带边框的引用语

问题

在一大段文字的中间，你想突出某些文字来吸引访问者的眼球。也就是说，你需要做一个有边界的引用。

解决办法

让我们编写一个包含三个段落的 HTML，您想要突出显示的段落通过为其分配一个要素类名称来与其他段落区分开来。下面是 HTML。

Pullquote.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>
    <link rel="stylesheet" href="stylepullquote.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="pullquotejq.js" type="text/javascript"></script>
  </head>
  <body>
     <p>Styles make the formatting job

much easier and efficient. To give an attractive look to web sites, styles are heavily used. Styles can be written within HTML document or can be attached externally. External styles are considered better</a>
     <p class="feature">jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.</a>
     <p> jQuery Selectors are used for selecting the area of the document where we want to apply styles. JQuery has the power of handling events also meaning we can apply styles when a particular action takes place</a>
  </body>
</html>

您可以利用边距、颜色和字体样式属性来突出显示文本。以下是您在外部样式表中编写的样式规则。

style pullquote . CSS

.quote{
     margin:5%;
     color:#00a;
     font-style: italic;
     border:5px solid black;
     padding: .5em;
}

以下是将样式规则引用应用于具有要素类名称的段落的 jQuery 代码。

pullquote q . js

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

它是如何工作的

margin 属性将段落从四个边界缩进 5%。color 属性使段落的颜色为蓝色。font-style 属性使其成为斜体。要在引用语周围创建边框，请向引用样式规则添加两个属性:border 在段落周围创建指定宽度的边框，padding 属性在边框和段落文本之间创建间隙。

在应用样式规则时，段落显示为带边框的引用，如图 12-10 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-10

被区分为带边框的引用的段落

12.10 使用图像创建拉动式报价

问题

要使文本在一大段文本中显得有吸引力和动态，您需要用图像做一个引用来突出它。引用可以像图片一样给大量文本的文档一些关注点，而不需要图片。

解决办法

对于这个食谱，你使用你在食谱 12-7 中使用的相同的 HTML。您知道，在 HTML 中，您想要与文本的其余部分区分开来的段落被分配了一个要素类名称。

为了在引用的两个对角应用图像，您制作了两个图形:leftfig.jpg 和 rightfig.jpg。leftfig.jpg 如图 12-11 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-11

leftfig.jpg 文件中的数字

放置在段落右下角的图像如图 12-12 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-12

rightfig.jpg 文件中的数字

您需要将两个图像应用到要突出显示的段落:一个在左上角，另一个在右下角。因为一个元素只能应用一种样式，所以要将两个图像应用于段落元素，需要将它放在 div 元素中。现在，您可以将一种样式应用于段落元素(添加一个图像)，将另一种样式应用于 div 元素以添加另一个图像。以下是将要素类名称的段落包含在 div 元素中后的 HTML 文件。

牵引尺寸. 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>
    <link rel="stylesheet" href="stylepullquoteimages.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="pullquoteimagesjq.js" type="text/javascript"></script>
  </head>
   <body>
      <p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. Styles can be written within HTML document or can be attached externally. External styles are considered better</p>
     <div>
        <p class="feature">jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.</p>
     </div>
     <p> jQuery Selectors are used for selecting the area of the document where we want to apply styles. jQuery has the power of handling events also meaning we can apply styles when a particular action takes place</p>
  </body>
</html>

以下是将两个图像应用到重要引述的样式规则。

style pull quote . CSS

.quote{
     background-image:url(leftfig.jpg);
     background-repeat: no-repeat;
     margin:5%;
     color:#00a;
     font-style: italic;
     padding:30px 5px 5px 30px;
}

.closing{
     background-image:url(rightfig.jpg);
     background-repeat: no-repeat;
     background-position: bottom right;
}

以下是将样式规则引号和结束语添加到要素类名称段落和 div 元素的 jQuery 代码。

毛衣尺寸 jj . js

$(document).ready(function() {
  $('p.feature').addClass('quote');
  $('div').addClass('closing');
});

它是如何工作的

引用样式规则在段落的左上角应用 leftfig.jpg。“背景重复”的值设置为“不重复”,以仅显示图像一次。margin 属性使段落从四边缩进浏览器窗口宽度的 5%。font-style 属性使段落以斜体显示，padding 属性设置段落文本和图像之间的距离。结束样式规则在段落的右下角应用 rightfig.jpg。

在应用样式时，你会看到引用与两个图像一起显示在两个对角，如图 12-13 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-13

该段落被识别为带有图像的引用

12.11 将列表属性应用于列表项

问题

下拉菜单中大量使用列表项，显示项的层次结构等等。您希望将列表属性应用于列表项目。

解决办法

让我们制作包含某些列表项的 HTML。以下是 HTML 文件。

list properties . 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>
    <link rel="stylesheet" href="stylelistproperties.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="listpropertiesjq.js" type="text/javascript"></script>
  </head>
  <body>
<ul>
  <li>Tea
    <ul>
      <li>Darjeeling</li>
      <li>Assam
        <ul>
          <li>Green Leaves</li>
          <li>Herbal</li>
        </ul>
      </li>
      <li>Kerala</li>
    </ul>
  </li>
  <li>Coffee
    <ul>
      <li>Cochin</li>
      <li>Kerala</li>
    </ul>
  </li>
  </ul>
  </body>
</html>

列表项在应用列表属性之前出现，如图 12-14 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-14

未应用任何样式的无序列表项

让我们将样式规则定义如下。

style listproperties . CSS

.dispdisc{list-style-type:disc}

dispdisc 样式规则使光盘出现在列表项目之前。以下是将 dispdisc 样式规则应用于列表项的 jQuery 代码。

list proprietaries jq . js

$(document).ready(function() {
  $('li').addClass('dispdisc');
});

它是如何工作的

列表样式类型设置为圆盘。图 12-15 显示所有列表项前面都有一个圆盘形状。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-15

应用列表样式后的无序项和列表项

12.12 仅将样式应用于选定的列表项

问题

为了突出显示它们，您希望仅对部分列表项应用样式。

解决办法

要将样式仅应用于选定的列表项，您需要将它们与其他列表项区分开来。为了选择列表的一部分，可以为它分配一个类名或 id。在这个解决方案中，您将 id 作为 intro 分配给想要突出显示的列表项。

Selectedlist.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>
    <link rel="stylesheet" href="styleselectedlist.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="selectedlistjq.js" type="text/javascript"></script>
  </head>
<body>
<ul>

  <li>Tea
    <ul id="intro">
      <li>Darjeeling</li>
      <li>Assam
        <ul>
          <li>Green Leaves</li>
          <li>Herbal</li>
        </ul>
      </li>
      <li>Kerala</li>
    </ul>
  </li>
  <li>Coffee
    <ul>
      <li>Cochin</li>
      <li>Kerala</li>
    </ul>
  </li>
</ul>
</body>
</html>

让我们用样式表文件中的 intro 定义一个应用于列表项的样式规则。

Styleselectedlist.css

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

要将样式规则中定义的属性应用于 intro id 的列表项，可以编写如下的 jQuery 代码。

选定的是 q.js

$(document).ready(function() {
  $('#intro').addClass('dispdisc');
});

样式规则将颜色和字体样式属性应用于带有 intro id 的列表项。你可以看到列表中只有一部分被高亮显示，如图 12-16 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-16

将样式属性应用于 id 为 intro 的列表项

对子选择器选择的列表项应用样式

symbol >是一个子组合，它查找作为具有指定 id(或类)的元素的子元素的每个列表项，并应用给定的样式规则。为了理解子选择器是如何工作的，让我们将一个名为 drink 的 id 分配给一个无序列表，如下面的 HTML 所示。

列表选择子选择器.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>
    <link rel="stylesheet" href="stylechildselector.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="childselectorjq.js" type="text/javascript"></script>
  </head>
  <body>
<ul>
  <li>Tea
    <ul id="drink">
      <li>Darjeeling</li>
      <li>Assam
        <ul>
          <li>Green Leaves</li>
          <li>Herbal</li>
        </ul>
      </li>
      <li>Kerala</li>
    </ul>
  </li>
  <li>Coffee
    <ul>
      <li>Cochin</li>
      <li>Kerala</li>
    </ul>
  </li>
</ul>
</body>
</html>

让我们假设样式表包含一个高亮样式规则，该规则应用绿色并使文本以斜体显示。

欴宒芞砉恁寁. css

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

下面是将高亮样式规则应用于带有饮料 id 的无序列表的子元素的 jQuery 代码。

儿童选择日. js

$(document).ready(function() {
  $('#drink >li').addClass('highlight');
});

当使用子选择器时，它只需找到作为饮料 id 元素的子元素的每个列表项，并对其应用 highlight 类。

对未应用 CSS 类的列表项应用样式

您还可以将样式应用于未应用特定 CSS 类的元素。让我们在 JavaScript 文件中编写以下 jQuery 代码。

Stylestocssnotjq.js

$(document).ready(function() {
  $('#drink >li').addClass('highlight');
  $('#drink li:not(.highlight)').addClass('redandbold');
});

假设样式表文件包含两个样式规则:highlight 和 redandbold，如下所示。

欴宒芞砉恁寁. css

.highlight {
     font-style: italic;
     background-color: #0f0;
}
.redandbold{
     color:red;
     font-family:arial;
     font-weight:bold
}

它是如何工作的

本示例查找所有未应用突出显示的列表项，并应用 redandbold 类中定义的属性。输出可能如图 12-17 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-17

应用两种不同的样式

12.13 在列表项之间放置分隔条

问题

您希望列表项显示在分隔每个列表项的直线上(没有缩进)。

解决办法

对于这个食谱，你使用你在食谱 12-10 中使用的相同的 HTML。HTML 显示某些列表项，如图 12-14 所示。

以下是风格规则。

样式生成器列表. css

.applytopborders
{
     border-top: 1px solid black;
}

.applybottomborder
{
     border-bottom: 1px solid black;
}

.liststyle {
     list-style-type:none;
     padding-left:0;
}

对无序列表应用一个样式规则，对除最后一个以外的所有列表项应用一个，对最后一个列表项应用第三个。

除暴安良 jq.js

$(document).ready(function() {
  $('ul').addClass('liststyle');
  $('li').addClass('applytopborders');
  $('li:last').addClass('applybottomborder');
});

它是如何工作的

这个食谱有三个风格规则。

从列表项和层次缩进中移除传统的项目符号。
对除最后一项之外的所有列表项应用顶部边框。
对最后一个列表项应用 applybottomborder 以对其应用下边框。

应用这些样式得到的输出如图 12-18 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-18

以直线列出项目，中间用分隔线隔开

12.14 对列表应用图像标记

问题

您希望用图像替换列表项中的传统项目符号。

解决办法

对于这个菜谱，您将创建显示某些列表项的 HTML，如下所示。

图像标记列表. 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>
    <link rel="stylesheet" href="styleimagemarker.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="imagemarkerjq.js" type="text/javascript"></script>
  </head>
<body>
<ul>
  <li>Tea
    <ul>
      <li>Darjeeling</li>
      <li>Assam
        <ul>
          <li>Green Leaves</li>
          <li>Herbal</li>
        </ul>
      </li>
      <li>Kerala</li>
    </ul>
  </li>
  <li>Coffee
    <ul>
      <li>Cochin</li>
      <li>Kerala</li>
    </ul>
  </li>
</ul>
</body>
</html>

在这个配方中，样式规则利用了两个属性 list-style-type 和 list-style-image。前者从列表项中删除传统的项目符号，后者应用指定的图像而不是项目符号。

您想要应用的图像而不是项目符号是 flower.jpg。下面是样式表中的样式规则。

欴宒桶梓暮. css

.liststyle {
     list-style-type: none;
     list-style-image:url(flower.jpg);
}

下面是将 liststyle 样式规则应用于无序列表的 jQuery 代码。

图像标记 q.js

$(document).ready(function() {
  $('ul').addClass('liststyle');
});

它是如何工作的

通过为 list-style-type 属性指定 none，项目符号将从列表项中消失，通过为 list-style-image 属性指定 flower.jpg，存储在此文件中的图像将应用于列表项。

当应用样式规则时，列表项中的传统项目符号被存储在 flower.jpg 的图像所替换。输出如图 12-19 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-19

以直线列出项目，中间用分隔线隔开

12.15 创建内嵌列表

问题

您希望列表项显示在水平行中，没有任何层次级别。

解决办法

对于这个菜谱，您将创建显示某些列表项的 HTML，如下所示。

内联列表.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>
    <link rel="stylesheet" href="styleinlinelist.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="inlinejq.js" type="text/javascript"></script>
  </head>
<body>
<ul>
  <li>Tea
    <ul>

      <li>Darjeeling</li>
      <li>Assam
        <ul>
          <li>Green Leaves</li>
          <li>Herbal</li>
        </ul>
      </li>
      <li>Kerala</li>
    </ul>
  </li>
  <li>Coffee
    <ul>
      <li>Cochin</li>
      <li>Kerala</li>
    </ul>
  </li>
</ul>
</body>
</html>

在这个配方中，样式规则使用显示、列表样式、边距和填充等属性，如下面的样式表所示。

style inlinelist . CSS

.liststyle {
      display: inline;
      list-style:none;
      margin:0;
      padding:0;
}

下面是将 liststyle 样式规则应用于无序列表及其列表项的 jQuery 代码。

内联 q.js

$(document).ready(function() {
  $('ul').addClass('liststyle');
  $('li').addClass('liststyle');
});

它是如何工作的

display 属性的 inline 值使列表项显示在一行中(即同一行)。将 list-style 的值设置为 none 会从列表项中移除传统项目符号。最后，赋给 margin 和 padding 的值 0 移除列表项中的分层缩进。

在应用样式属性时，列表项显示在一行中，没有任何传统的项目符号，如图 12-20 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-20

将一行中显示的项目列为内嵌

12.16 对超链接和邮件应用样式

问题

超链接带有传统的下划线，以区别于静态文本。您希望删除这些下划线并对这些链接应用其他样式。

解决办法

要对超链接应用样式，让我们创建一个包含超链接的 HTML 文件。

Hyperlinks.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>
    <link rel="stylesheet" href="stylehyperlinksmailto.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="hyperlinksjq.js" type="text/javascript"></script>
  </head>
  <body>
     <div>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.
      jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.
jQuery is an open source project. <a href="abc.com">Click Here</a> for more information </div>
  </body>
</html>

你可以看到“点击这里”是一个超链接，并在网页上加了下划线。当访问者点击此链接时，他会被导航到 abc。com 网站。

若要删除超链接的下划线并对其应用其他样式属性，请在外部样式表文件中编写以下样式规则。

超连结邮件样式. css

.linkstyle{
      font-weight:bold;
      background-color: #00f;
      color:#fff;
       text-decoration:none;
}

要将 linkstyle 样式规则应用于超链接，jQuery 代码可以编写如下。

超连结 jq.js

$(document).ready(function() {
     $('a[href]').addClass('linkstyle');
});

现在让我们看看如何将样式应用于 mailto 超链接。这里有一个 HTML 文件，它有一个 mailto 超链接，当选择它时，会打开一个邮件客户端程序，向相关人员发送电子邮件。

mailto.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>
    <link rel="stylesheet" href="stylehyperlinksmailto.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="mailtojq.js" type="text/javascript"></script>
  </head>
  <body>
      <div>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.
     jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.
     jQuery is an open source project. <a href="mailto:bmharwani@yahoo.com">Contact Us</a> for more information </div>
  </body>
</html>

下面是包含 jQuery 代码的 JavaScript 文件的内容。

mailtojq.js

$(document).ready(function() {
  $('a[href^="mailto:"]').addClass('linkstyle');
});

它是如何工作的

我们的 CSS 样式规则使用 font-weight 属性使超链接以粗体显示。background-color 属性将超链接背景色设置为蓝色，color 属性设置为白色，text-decoration 属性的值设置为 none，以删除超链接的传统下划线。

以下是 jQuery 语句。

$('a[href]').addClass('linkstyle');

选择文档中所有具有 href 属性的锚元素(a ),并对它们应用 linkstyle 类。输出如图 12-21 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-21

从超链接中删除传统下划线

以下语句选择文档中所有具有 href 属性并以 mailto 开头的锚元素(’ a ')，并对它们应用 linkstyle 类。

$('a[href^="mailto:"]').addClass('linkstyle');

输出可能如图 12-22 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-22

将链接样式应用于 mailto 选项

12.17 为 HTML 元素分配不同的维度

问题

您想要约束某些段落元素的大小。

解决办法

对于这个解决方案，您创建一个包含两个段落元素的 HTML 文件，这两个元素被分配了 feature1 和 feature2 类名。

不同大小. 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="differentdimensionjq.js" type="text/javascript"></script>
  </head>
   <body>
      <p class="feature1">Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.  </p>
      <p class="feature2">jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.  jQuery is an open source project that provides a wide range of features with cross platform compatibility. JQuery has hundreds of plug-ins to extend its features. jQuery helps in increasing interactions with a web site </p>
  </body>
</html>

要将 width 属性应用于具有 feature1 和 feature2 类名的段落元素，您需要编写以下 jQuery 代码。

大小不同 jq.js

$(document).ready(function() {
  $('.feature1').css({'width':'50%', 'padding':'10px', 'border':'1px dashed'});
  $('.feature2').css({'padding':'30px', 'border':'2px solid'});
});

它是如何工作的

该解决方案使用 css()方法(在方法 3-7 中描述)。在 jQuery 代码中，第一条语句将第一段限制在浏览器窗口宽度的 50%。border 属性创建 1 px 粗细的虚线边框，padding 属性在段落文本和边框之间创建 10px 的间距。第二条语句使段落文本用尽了浏览器窗口的整个宽度。border 属性创建 2px 粗细的实心边框，padding 属性在段落文本和边框之间创建 30px 的间距。输出如图 12-23 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-23

以百分比形式指定宽度属性

您还可以用像素来指定宽度，如下面的 jQuery 代码所示。

$('.feature1').css({'width':'300px', 'padding':'10px', 'border':'1px dashed'});
$('.feature2').css({'padding':'30px', 'border':'2px solid'});

第一段的宽度限制为 300 像素，如图 12-24 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-24

以像素为单位指定宽度属性

12.18 放置 HTML 元素

问题

您想让一个段落元素出现在另一个段落元素的右边或左边。

解决办法

让我们创建一个包含两个段落元素的 HTML 文件，这两个元素被赋予 feature1 和 feature2 类名。

放置.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="placinghtmljq.js" type="text/javascript"></script>
  </head>
  <body>
      <p class="feature1">Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.  </p>
     <p class="feature2">jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.  jQuery is an open source project that provides a wide range of features with cross platform compatibility. jQuery has hundreds of plug-ins to extend its features.jJQuery helps in increasing interactions with a web site </p>
  </body>
</html>

要将 float 属性应用于具有 feature1 和 feature2 类名的段落元素，您需要编写以下 jQuery 代码。

放置 htmljq.js

$(document).ready(function() {
  $('.feature1').css({'width':'50%', 'border':'1px dashed', 'float':'left'});
  $('.feature2').css({'border':'2px solid'});
});

制作两列布局

也可以让第一段向左浮动，第二段向右浮动。让我们修改下面的 jQuery 代码。

两列 jq.js

$(document).ready(function() {
  $('.feature1').css({'width':'50%', 'border':'1px dashed', 'float':'left'});
  $('.feature2').css({'width':'48%','border':'2px solid', 'float':'right'});
});

反转列

您也可以交换列的位置。也就是说，第一段可以设置为右浮动，第二段可以设置为左浮动。用于此目的的 jQuery 代码可以编写如下。

反向列 jq.js

$(document).ready(function() {
  $('.feature1').css({'width':'50%', 'border':'1px dashed', 'float':'right'});
  $('.feature2').css({'width':'48%', 'border':'2px solid', 'float':'left'});
});

它是如何工作的

在 jQuery 代码中，第一条语句指定属性 float:left，使第一段出现在浏览器窗口的左侧，在右侧留出 50%的空间，然后由第二段占据(见图 12-25 )。border 属性在第一段周围创建 1 px 粗细的虚线边框。第二条语句在第二段周围创建 2px 厚的实心边框。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-25

应用浮动属性

当第一个段落在两栏布局中设置为左浮动时，它会在其右侧创建一个空格(供第二个段落使用)。同样，当属性 float:right 应用于第二个段落时，它会在浏览器窗口的左侧创建一个可供第一个段落使用的空间。样式应用的输出如图 12-26 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-26

应用浮动属性

反向布局如图 12-27 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-27

交换两列

12.19 创建多栏布局

问题

您希望创建一个三列布局(即三个段落位于页面上的特定位置)。

解决办法

您可以通过将栏放置在网页的三个不同位置来创建三栏布局。让我们创建一个包含三个段落元素的 HTML 文件，它们的类名分别为 leftalign、centeralign 和 rightalign。以下是 HTML 文件。

Multicolumn.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="multicolumnjq.js" type="text/javascript"></script>
  </head>
  <body>
     <p class="leftalign">Styles

make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.   </p>
     <p class="centeralign">jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too. </p>
     <p class="rightalign">jQuery is an open source project that provides a wide range of features with cross platform compatibility. jQuery has hundreds of plug-ins to extend its features. JQuery helps in increasing interactions with a web site. </p>
  </body>
</html>

下面是将三个段落元素放在各自位置的 jQuery 代码。

多列节点. js

$(document).ready(function() {
  $('.leftalign').css({'position':'absolute', 'left':'50px', 'width':'300px'});
  $('.centeralign').css({'position':'absolute', 'left':'400px', 'width':'300px'});
  $('.rightalign').css({'position':'absolute', 'left':'750px', 'width':'300px'});
});

应用浮动

通过应用以下解决方案中演示的 float 属性，可以获得相同的输出(三列布局)。在下面的 HTML 文件中，您定义了三个段落元素(没有指定任何类名)。

应用.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="applyfloatsjq.js" type="text/javascript"></script>
  </head>
  <body>

     <p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript. </p>
     <p>JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too. </p>
<p>JQuery is an open source project that provides a wide range of features with cross platform compatiblity. JQuery has hundreds of plug-ins to extend its features. JQuery helps in increasing interactions with a web site. </p>
  </body>
</html>

然后编写以下 jQuery 代码。

应用 flowsjq . js

$(document).ready(function() {
  $('p').css({'float':'left',  'width':'300px','margin':'5px'});
});

增加各列之间的间距

装订线是指各栏之间的间距。还可以通过设置 width 和 margin 属性的值来增加列之间的间距。通过减少列宽和增加边距大小，可以增加列间距(装订线大小)。

让我们减少 width 属性并稍微增加 margin 值，如下面的 jQuery 代码所示。

应用 flowsjq . js

$('p').css({'float':'left',  'width':'375px','margin':'15px'});

它是如何工作的

在第一组 jQuery 代码中，您会看到第一条语句设置了 class="leftalign "的 HTML 元素的 CSS 属性。它显示宽度为 300 像素的段落元素，并将其放置在其包含元素(在本例中为浏览器窗口)中左侧 50 像素处。类似地，第二条语句将 class="centeralign "的 HTML 元素定位在浏览器窗口左侧 400 像素处。第三条语句将 class="rightalign "的 HTML 元素定位在浏览器窗口左侧 750 像素处。输出如图 12-28 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-28

使用 position 属性的三列布局

在浮动示例中，您为每个段落元素提供 300 像素的宽度，并使它们一个接一个地浮动到浏览器窗口的左侧。第一段首先出现，宽度为 300 像素。在 5 个像素的边距之后，第二个段落出现(即，在浏览器窗口左侧 305 个像素之后)。第二段也取 300 像素的宽度。最后，在为第二段保留 5 个像素的边距后(即浏览器窗口的最右边)出现第三段，如图 12-29 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-29

使用 float 属性的三列布局

最后，图 12-30 显示了增加檐槽尺寸后的示例。装订线大小指的是各列之间的间距。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-30

增加了檐槽尺寸的三列

12.20 图像周围环绕文字

问题

通常，当您在网页上显示图像和文本时，两者会相继出现。要么图像跟随文本，要么文本跟随图像(取决于在 HTML 文件中的位置)；默认情况下，两者不会相邻出现。有时，您希望图像被周围的文本包裹。

解决办法

让我们把一个图像放在一个 HTML 文件中，如下所示。

wraptext.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="wrapjq.js" type="text/javascript"></script>
  </head>
  <body>
       <img src="cell.jpg"/>
  </body>
</html>

现在编写 jQuery 代码，将 img 元素包装在 div 元素中，然后将带有一些文本的段落元素追加到 div 元素中。下面是 jQuery 代码。

包装 q.js 的制作

$(document).ready(function() {
  $('img').wrap('<div></div>');
  $('<p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript. jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.  jQuery is an open source project that provides a wide range of features with cross platform compatiblity. jQuery has hundreds of plug-ins to extend its features. JQuery helps in increasing interactions with a web site. </p>').appendTo('div');
  $('img').css({'float':'left',  'width':'200px','height':'200px'});
  $('p').css({'clear':'right'});
});

它是如何工作的

应用于图像的 CSS 属性使用 float 属性使其在浏览器窗口中向左浮动(允许文本显示在其右侧)。width 属性将图像限制为 200px(小于浏览器窗口总宽度的任何尺寸)，因此有空间让文本环绕图像。height 属性将图像的高度限制为特定的大小。

当“右”被分配给 clear 属性时，它会使额外的段落文本向左移动。它试图清空右侧的空间(即，如果左侧的空间可用，它试图填充左侧的空间)。因此，超出图像高度的段落的额外文本移动到左侧，使图像周围的文本环绕图像。

将前面的 CSS 属性应用于图像和段落元素，您将得到如图 12-31 所示的输出。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-31

将文本环绕在图像周围

12.21 在图像后面放置投影

问题

您想要在图像后面放置一个投影。

解决办法

要创建投影，你需要制作两个图像，一个在图像右侧创建投影，另一个在底部创建阴影效果。这些图像可以使用画笔或任何技术制作。让我们将图像右边的阴影命名为 shadowright.jpg，如图 12-32 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-32

右侧的背景阴影图像

同样，在图像底部投下阴影的图像被命名为 shadowbottom.jpg。如图 12-33 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-33

底部的背景阴影图像

让我们假设一个图像文件被命名为 image4.jpg。下面是显示它的 HTML 代码。

Dropshadow.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="dropshadowjq.js" type="text/javascript"></script>
  </head>
  <body>
       <span class="shadow"><img src="scene.jpg" /></span>
  </body>
</html>

应用于 img 元素和 span 元素的样式规则是通过 css()方法应用的，如下面的 jQuery 代码所示。

drop shadow jq . js

$(document).ready(function() {
  $('span').css({'background':'url(shadowright.jpg)', 'background-position':'right',   'background-repeat':'no-repeat', 'padding':'195px 15px 0px 0px'});
  $('img').css({'width':'200px','height':'200px','background':'url(shadowbottom.jpg)',  'background-repeat':'no-repeat','background-position':'bottom', 'padding':'0 0 10px 0' });
});

它是如何工作的

注意，img 元素包含在 span 元素中。这样做的原因是，您需要对 img 元素应用两个样式规则，一个是在图像的右侧投下阴影，另一个是在所显示图像的底部投下阴影。但是不能对一个元素应用多个样式规则。因此，要对 img 元素应用两个样式规则，可以用 span 元素将它括起来，这样一个样式规则可以应用于 span 元素(最终应用于 img 元素)，而其他样式规则可以应用于 img 元素本身。

第一个 css()调用包含四个属性。

将 background:url 属性设置为在图像的背景中显示存储在文件 shadowright.jpg 中的图像。
background-repeat 属性设置为 no-repeat 以仅显示一次阴影图像。
背景位置设置为“右”,以在图像的右侧显示阴影图像，并与底部对齐。
padding 属性设置阴影图像与实际图像的距离。这有助于决定阴影的宽度。
类似地，第二个 css()调用包含六个属性。
width 和 height 属性设置为 200px，以将显示的实际图像的宽度和高度限制为 200 像素。
将 background:url 属性设置为在图像的背景中显示存储在文件 shadowbottom.jpg 中的图像。
“背景重复”设置为“不重复”,以便只显示一次阴影图像。
背景位置设置为底部，以在实际图像的底部显示阴影图像。
padding 属性设置阴影图像与实际图像的距离。

如图 12-34 所示，将这些属性应用于图像，使其在右侧和底部产生阴影。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-34

后面有阴影的图像

12.22 当鼠标移动到链接上时更改光标

问题

当光标在链接上移动时，您想要更改光标的样式。

解决办法

对于这个问题，您创建一个 HTML 文件，该文件在一个 div 元素中包含一些信息以及一个单击此处链接，当选择该链接时，它会导航到 abc.com 站点。下面是 HTML。

Changecursor.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="changecursorjq.js" type="text/javascript"></script>
  </head>
  <body>
     <div>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.
     jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.
     jQuery is an open source project. <a href="abc.com">Click Here</a> for more information </div>
  </body>
</html>

要对超链接应用不同的光标属性，您需要编写以下 jQuery 代码。

Changecursorjq.js

$(document).ready(function() {
  $(a).hover(
    function(){
      $(this).css({'cursor': 'wait', 'color': 'blue' , 'background-color':'cyan'});
    },
    function(){
      $(this).css({'cursor': 'default', 'color': '#000000' , 'background-color':'#ffffff'});
    });
});

它是如何工作的

hover()方法包含两个函数:一个在鼠标指针悬停在所选元素上时执行，另一个在鼠标指针离开所选元素时执行。最初，输出如图 12-35 所示。您可以看到超链接带有下划线，鼠标指针是默认指针。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-35

未访问链接时的默认光标

在链接上移动鼠标时，在 hover()中定义的 CSS 属性被应用到它上面，改变鼠标指针的形状，看起来好像在等待什么事情发生，链接的背景色变为青色，前景色变为蓝色，如图 12-36 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-36

当鼠标移动到链接上时，光标会改变

12.23 在特定区域显示长文本

问题

您希望在特定区域显示一段较长的文本。

解决办法

下面的 HTML 文件定义了一个段落元素，您希望将它限制在页面的一个较小区域内。

长文本区域. 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="longtextinareajq.js" type="text/javascript"></script>
  </head>
  <body>
      <p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.  <br/>
      jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.  jQuery is an open source project that provides a wide range of features with cross platform compatibility. jQuery has hundreds of plug-ins to extend its features. jQuery helps in increasing interactions with a web site </p>
  </body>
</html>

要限制文本并将溢出属性应用于段落元素，可以使用下面的 jQuery。

long textareajq . js

$(document).ready(function() {
     $('p').css({ 'width':'50%', 'height':'100px','overflow':'scroll' });
});

它是如何工作的

您将浏览器窗口的 50%和 100 像素的高度分配给段落。通过将 overflow 的值设置为 scroll，可以在段落元素的文本在指定的高度和宽度下不完全可见时显示滚动条。输出如图 12-37 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-37

使用滚动选项应用溢出元素

让我们看看当您将溢出属性的值设置为 hidden 时会发生什么。未能出现在指定区域内的段落文本变得不可见，如图 12-38 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-38

使用隐藏选项应用溢出元素

让我们将溢出属性的值设置为 auto。滚动条只显示高度，不显示宽度(与值滚动不同)(也就是说，滚动条只在需要的地方出现)。这种风格的输出如图 12-39 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-39

使用自动选项应用溢出元素

让我们将溢出属性的值设置为 visible。该段落的文本完全可见(即，它不局限于分配给它的区域)，如图 12-40 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-40

使用可视选项应用溢出元素

12.24 制作圆角柱

问题

您希望制作一个带有圆角的单列。

解决办法

要使该列显示为圆形，您需要制作一个圆角矩形，并将其粘贴到文本背景中。让我们做一个圆角矩形，如图 12-41 所示，命名为 columnfig.jpg。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-41

圆角矩形

该图像被设置为文本的背景。让我们创建一个 HTML 文件，其中包含一个段落元素和一些文本，如下所示。

round column . 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>
    <link rel="stylesheet" href="styleroundedcolumn.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="roundedcolumnjq.js" type="text/javascript"></script>
  </head>
  <body>
       <p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.
        jQuery is powerful JavaScript library used to make dynamic sites.</p>
  </body>

</html>

在样式表中，让我们编写一个样式规则来粘贴圆角矩形作为段落元素的背景。样式规则包括宽度、填充、背景和背景重复等属性，如下所示。

style round column . CSS

.backfig{
     width:150px;
     padding:10px;
     background:url(columnfig.jpg);
     background-repeat:no-repeat;
}

让我们编写 jQuery 代码，将 backfig 样式规则应用于段落元素。下面是 jQuery 代码。

round column jq . js

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

它是如何工作的

backfig 样式规则为段落文本指定一个宽度，该宽度等于圆角矩形的宽度，以便段落文本保持限制在圆角矩形的边界内。padding 属性在矩形边界和段落文本之间保留一个间隙。background 属性用于将存储在 columnfig.jpg 的圆角矩形图像设置为段落文本的背景，background-repeat 的值设置为 no-repeat，以使圆角矩形仅出现一次。

应用圆角矩形图像作为背景后，段落文本看起来如图 12-42 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-42

圆角单柱

12.25 应用文本装饰

问题

您希望对某些文本应用文本装饰，如上划线和下划线样式，以引起人们的注意。为了便于比较，您还需要应用一些效果，如删除线。例如，演示某个商品的早期折扣和当前折扣。

解决办法

以下是包含三个段落元素的 HTML，这三个元素被分配了类名 feature1、feature2 和 feature3。

Textdecor.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="textdecorjq.js" type="text/javascript"></script>
  </head>
  <body>
       <p class="feature1">jQuery is powerful</p>
       <p class="feature2">Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript. jQuery is powerful JavaScript library used to make dynamic sites.</p>
       <p class="feature3">10% Discount on all products</p>
       <p>20% Discount  on all products</p>
  </body>
</html>

下面是对段落元素应用文本修饰的 jQuery。

文字译码. js

$(document).ready(function() {
  $('p.feature1').css({'text-decoration':'underline'});
  $('p.feature2').css({'text-decoration':'overline'});
  $('p.feature3').css({'text-decoration':'line-through'});
});

您还可以对标题(即 feature1 类段落)应用上划线和下划线值来突出显示它。

<div>
     <p class="feature1">jQuery is powerful</p>
</div>

样式规则现在改变了。

Textdecor2jq.js

$(document).ready(function() {
  $('p.feature1').css({'text-decoration':'underline'});
  $('div').css({'text-decoration':'overline'});
  $('p.feature3').css({'text-decoration':'line-through'});
});

它是如何工作的

对 css()的第一次调用将 class="feature1 "的段落文本显示为带下划线的文本。类似地，第二个调用显示 class="feature2 "段落的文本，上面有一条线。第三个调用显示 class="feature3 "段落的文本，中间有一条线，就像文本被描边一样。输出如图 12-43 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-43

应用不同的文本修饰选项

使用换行的好处是访问者可以知道以前的内容是什么，并且可以与当前的内容进行比较。如前面的解决方案所示，先前的贴现率是 10%，现在增加到 20%。

为了突出显示标题，因为不能对同一个元素应用两个样式规则，所以可以将 feature1 类段落放在 div 元素中，这样就可以对 div 应用一个样式规则，对 paragraph 元素应用另一个样式规则。您可以看到，第一个样式规则使 feature1 类段落显示为带下划线。第二个样式规则使一条上划线出现在 div 元素的内容上(即 feature2 类段落上)。第三种样式规则使 feature2 类段落看起来被删除。输出如图 12-44 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-44

对文本标题应用上划线和下划线

12.26 缩放图像

问题

如果图像是可缩放的(即，如果放置图像的块的尺寸减小)，图像的尺寸也应该自动减小。类似地，如果封闭块的大小增加，您希望图像的大小也增加。

解决办法

让我们使用你在配方 12-19 中使用的相同的 HTML(参考图 12-30 了解该配方的结果)。这一次，您根据包含 block 元素的%(百分比)来定义图像的宽度。因为图像的包含块是浏览器窗口，所以图像的宽度响应于浏览器窗口尺寸的改变而增加或减小。以下是修改后的样式规则。

Stylescaling.css

.moveleft
{
     width:40%;
     float:left;
}

.imagewrap {
     clear:right;
}

下面是将样式规则应用于图像和段落元素的 jQuery 代码。

Scalingimagesjq.js

$(document).ready(function() {
      $('img').wrap('<div></div>');
      $('<p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript. jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.  jQuery is an open source project that provides a wide range of features with cross platform compatiblity. jQuery has hundreds of plug-ins to extend its features. JQuery helps in increasing interactions with a web site. </p>').appendTo('div');
       $('img').addClass('moveleft');
       $('p').addClass('imagewrap');
});

它是如何工作的

如果从配方 12-19 增加浏览器窗口的宽度，您会发现图像的尺寸保持不变，并且不会根据浏览器窗口宽度的变化而缩放，如图 12-45 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-45

增加浏览器窗口的宽度时，图像不会缩放

图像不缩放的原因在于应用于它的原始样式。这些样式已添加到样式规则中以供参考。

Stylescaling.css

.moveleft
{
     width:200px;
     height:200px;
     float:left;
}

您可以看到图像的宽度固定为 200 像素，因此，无论浏览器窗口大小如何变化，图像的宽度都保持不变。

新的 moveleft 样式规则包含两个属性。

width 属性被设置为等于浏览器窗口宽度的 40%(即，每当浏览器窗口的宽度改变时，图像的宽度改变以保持 40%的比率)。
float 属性设置为 left，以使图像保持在浏览器的左侧，为段落文本显示在其右侧留出空间。

imagewrap 样式规则应用于段落文本，并包含一个 clear 属性，使额外的段落文本(扩展图像大小的文本)出现在图像下方，以便图像在文本内换行显示。只有当浏览器窗口的大小调整到段落文本超出图像高度时，该属性的影响才可见。

当应用样式时，你会发现图像随着浏览器窗口的大小而变得可缩放，如图 12-46 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-46

随着浏览器窗口宽度的增加，图像被缩放(尺寸增加)

12.27 设置背景图像

问题

您希望图像作为文本的背景出现。

解决办法

假设下面的 HTML 包含一个段落元素来显示简单的文本。

Backgroundimage.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>
    <link rel="stylesheet" href="stylebackgroundimage.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="backgroundimagejq.js" type="text/javascript"></script>
  </head>
  <body>
      <p>Styles make the formatting job much easier and efficient. To give an attractive look to web sites, styles are heavily used. A person must have a good knowledge of HTML and CSS and a bit of Javascript.
     jQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn but easy to implement too.
     jQuery is an open source project that provides a wide range of features with cross platform compatiblity. jQuery has hundreds of plug-ins to extend its features. jQuery helps in increasing interactions with a web site. </p>
  </body>
</html>

为了将图像作为文本的背景，您需要编写一个样式规则，如下所示。

Stylebackgroundimage.css

.placeimage
{
     background-image:url(cell.jpg);
     background-repeat:no-repeat;
}

现在您需要编写 jQuery 代码来将 placeimage 应用到 body 标记。下面是 jQuery 代码。

Backgroundimagejq.js

$(document).ready(function() {
  $('body').addClass('placeimage');
});

它是如何工作的

让我们假设有一个名为 cell.jpg 的图像文件。在 placeimage 样式规则中，您使用了两个属性:background-image 和 background-repeat。在背景图像的帮助下，你使存储在 cell.jpg 的图像作为文本的背景出现。默认情况下，图像会重复几次，以填满包含的块。因此，您将 background-repeat 属性的值设置为 no-repeat，以便图像只在背景中出现一次。

将 placeimage 样式规则应用到 HTML 文件的主体后，存储在 cell.jpg 文件中的图像将作为文本的背景出现，如图 12-47 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-47

图像被设置为文本的背景

12.28 在浏览器中将背景图像居中

问题

通常，当您将图像设置为背景时，它会与浏览器窗口的左侧对齐。您希望背景图像出现在浏览器屏幕的中央。

解决办法

在这个食谱中，你使用你在食谱 12-26 中使用的相同的 HTML 文件，它显示一个图像作为背景(左对齐)。要使左对齐的背景图像出现在屏幕中央，可以使用 background-position 属性。通过将 background-position 属性的值设置为中心，背景图像将出现在浏览器屏幕的中心。

让我们将背景位置添加到 placeimage 样式规则中(见配方 12-26 ),如下所示。

style center image . CSS

.placeimage
{
     background-image:url(cell.jpg);
     background-repeat:no-repeat;
     background-position:center;
}

下面是将 placeimage 样式规则应用于 HTML 正文的 jQuery 代码。

Centeringimagejq.js

$(document).ready(function() {
  $('body').addClass('placeimage');
});

它是如何工作的

background-image 属性使 cell.jpg 的图像显示为背景。要使背景图像只出现一次(即防止它重复出现并填满整个块)，可以将 background-repeat 属性的值设置为 no-repeat。最后，通过将值 center 分配给 background-position 属性，可以确保背景图像出现在浏览器窗口的中心。

将 placeimage 样式规则应用于 HTML 文件的主体后，保存在 cell.jpg 的图像成为背景并位于浏览器窗口的中心，如图 12-48 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-48

背景图像位于浏览器屏幕的中央

12.29 使背景图像静止

问题

当您浏览任何网页时，图像和文本在页面上向上滚动。即使上下滚动页面，您也希望背景图像保持静止。

解决办法

在这个食谱中，你使用你在食谱 12-26 中使用的相同的 HTML 文件。在这里，您向段落中添加更多的文本，使其足够大，以便对其应用滚动。若要在滚动网页时保持背景图像不动，可以使用 background-attachment 属性。通过将值固定设置为 background-attachment 属性，可以将背景图像设置为在滚动网页时保持静止。因此，让我们将 background-attachment 属性添加到您在前一个菜谱中使用的样式表中。

Styleimagestationary.css

.placeimage
{
     background-image:url(cell.jpg);
     background-repeat:no-repeat;
     background-position:center;
     background-attachment: fixed;
}

下面是将 placeimage 样式规则应用于 HTML 文件正文的 jQuery 代码。

imagestationajq . js

$(document).ready(function() {
  $('body').addClass('placeimage');
});

它是如何工作的

以下是 placeimage 样式规则中使用的每个属性的功能。

background-image 属性使 cell.jpg 图像显示为背景。
通过将值 no-repeat 赋给 background-repeat 属性，将背景图像设置为仅出现一次。
将 background-position 属性设置为中心，使背景图像出现在浏览器屏幕的中心。
background-attachment 属性设置为 fixed，以使背景图像在滚动网页时保持静止。

将 placeimage 样式规则应用到 HTML 文件的主体后，背景图像作为背景出现，如图 12-49 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-49

当文本大于浏览器窗口大小时，会出现滚动条

现在，当你向下滚动网页时(见右边的滚动条)，背景图像保持在浏览器屏幕的中央，而文本如图 12-50 所示滚动。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 12-50

即使滚动文本，背景图像也保持静止

12.30 摘要

在这一章中，你看到了解释经常应用于网页的 CSS 技术的方法。这包括区分 HTML 元素、对嵌套在另一个元素中的元素应用样式、缩进段落、对段落应用首字母大写、移除标题和段落之间的间隙、对标题文本应用样式以及缩进多个段落的首行。

您看到了创建带有悬挂缩进的段落、带边框的引用、带有图像的引用的过程。您学习了如何将列表属性应用于列表项，将样式应用于选定的列表项，在列表项之间放置分隔线，将图像标记应用于列表，以及创建内联列表。

最后，您了解了如何对超链接和 mailto 应用样式、为 HTML 元素分配不同的尺寸、放置 HTML 元素、创建多栏布局、在图像周围环绕文本、在图像后面放置阴影、当鼠标移动到链接上时改变光标、在特定区域内显示一段较长的文本、制作圆角栏、应用文本装饰、缩放图像、设置背景图像、将背景图像居中以及使背景图像保持静止。