jQuery 简介

简介

超文本标记语言、样式表和脚本语言是互联网的三种基本语言。网站使用HTML构建，使用CSS设置样式，并使用JavaScript添加交互功能。由于用户单击、悬停或滚动而产生的大多数动画或动作都是用JavaScript构建的。

jQuery是)，]，这意味着你可以确信你的代码输出会在任何现代浏览器中呈现出你想要的效果。

本指南不假定您事先了解jQuery。您将在Web项目中完成jQuery的安装。将定义与jQuery相关的重要Web开发概念，如API、DOM和CDN。一旦您安装了这个知识库和jQuery，您将学习使用常见的选择器、事件和效果。

前提条件

在开始阅读本指南之前，您需要具备以下条件：

  • 基本的超文本标记语言和css知识。
  • 了解编程的基本原理。虽然开始编写jQuery时不需要具备高级的JavaScript知识，但熟悉变量和数据类型的概念会有很大帮助。

设置jQuery

JQuery是一个JavaScript文件，您将在您的HTML中链接到它。有两种方式可以将jQuery包含在项目中，即下载本地副本或通过内容分发网络(CDN)链接到文件。

<$>[备注] 注 ：A_Content Delivery Network_(CDN)是由多台服务器组成的系统，根据地理位置向用户分发Web内容。当您通过CDN链接到托管的jQuery文件时，它可能会比在您自己的服务器上托管时更快、更高效地到达用户手中。 <$>

在示例中，将使用CDN来引用jQuery。您可以在谷歌的托管Libraries.]中找到最新版本的jQuery如果你想下载它，你可以从官网获取一份jQuery.

您将从创建一个小型Web项目开始本练习。它由css/目录下的style le.css、js/目录下的scripts.js和工程根目录下的主index.html组成。

1project/
2├── css/
3|   └── style.css
4├── js/
5|   └── scripts.js
6└── index.html

首先，创建一个HTML骨架，并将其另存为index.html：

 1[label index.html]
 2<!doctype html>
 3<html lang="en">
 4
 5<head>
 6  <title>jQuery Demo</title>
 7  <link rel="stylesheet" href="css/style.css">
 8</head>
 9
10<body>
11</body>
12
13</html>

在结束</BODY>标签之前链接到jQuery CDN，后面紧跟您自己的自定义JavaScript文件scripts.js：

 1[label index.html]
 2<!doctype html>
 3<html lang="en">
 4
 5<head>
 6  <title>jQuery Demo</title>
 7  <link rel="stylesheet" href="css/style.css">
 8</head>
 9
10<body>
11
12<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
13<script src="js/scripts.js"></script>
14</body>
15
16</html>

您的JavaScript文件(scripts.js)必须包含在文档中的jQuery库下面，否则它将无法工作。

<$>[备注] 注意： 如果您下载了jQuery的本地副本，请将其保存在您的js/文件夹中，并链接到js/jquery.min.js。 <$>

此时，jQuery库已加载到您的站点中，您可以完全访问jQuery API.

<$>[注] 注： 应用程序接口（API)是允许软件程序相互交互的接口。在本例中，jQuery的API包含访问jQuery所需的所有信息和文档。 <$>

使用jQuery

通过比较一句简单的你好，世界！程序，您可以看到它们的编写方式的不同。

1[label JavaScript]
2document.getElementById("demo").innerHTML = "Hello, World!";

1[label jQuery]
2$("#demo").html("Hello, World!");

这个简短的示例演示了jQuery如何以简洁的方式实现与普通JavaScript相同的最终结果。在其核心部分，jQuery用于通过DOM与浏览器中的HTML元素连接。

Document Object Model(DOM)是一种在浏览器中与Html交互的方法。要查看DOM的确切内容，在您的Web浏览器中，右击当前网页，选择)。这将打开开发人员工具。您在这里看到的HTML代码是DOM。

每个HTML元素都被认为是DOM中的_node_-一个JavaScript可以接触的对象。这些对象以树结构排列，<html>更接近根，每个嵌套元素是树中更远的分支。JavaScript可以添加、删除和更改任何这些元素。

如果你再次用鼠标右键点击网站并点击查看页面源代码，你会看到网站的原始网页输出。起初很容易混淆DOM和HTML源文件，但它们是不同的--页面源文件就是编写在HTML文件中的内容。它是静态的，不会更改，也不会受到JavaScript的影响。DOM是动态的，并且可以更改。

DOM的最外层，即包装整个<html>节点的层是_DOCUMENT_OBJECT。要开始使用jQuery操作页面，您需要确保文档首先是就绪的。

在您的js/目录中创建scripts.js文件，并键入以下代码：

1[label js/scripts.js]
2$(document).ready(function() {
3    // all custom jQuery will go here
4});

你写的所有jQuery代码都将被包装在上面的代码中。jQuery将检测这种就绪状态，因此此函数中包含的代码将仅在DOM准备好执行JavaScript代码时运行。即使在某些情况下，直到元素被呈现时才加载JavaScript，包含此块也被认为是最佳实践。

在本文的引言中，您看到了一个简单的Hello，World！剧本。要启动此脚本并使用jQuery将文本打印到浏览器，首先需要创建一个应用了IDdemo的空块级段落元素：

1[label index.html]
2...
3<body>
4
5<p id="demo"></p>
6...

jQuery是用美元符号（$)来调用和表示的。您可以使用jQuery访问DOM，主要使用CSS语法，并通过方法应用操作。一个基本的jQuery示例遵循以下格式：

1$("selector").method();

由于在css中ID由哈希符号(# )表示，因此您需要使用选择器 demo来访问demo ID。html()是更改元素中的HTML的方法。

您现在要将自定义Hello，World！程序在jQuery ready（)包装器中。将这一行添加到现有函数中的scripts.js文件中：

1[label js/scripts.js]
2$(document).ready(function() {
3    $("#demo").html("Hello, World!");
4});

保存文件后，即可在浏览器中打开index.html文件。如果一切正常，您将看到输出`Hello，World！‘。

如果您以前被DOM搞糊涂了，现在您可以看到它的实际应用。右击Hello，World！文本放在页面上，然后选择检查元素。DOM现在显示<p id=demo>Hello，World！</p>。如果您选择[查看页面源代码]，您只能看到<p id=demo></p>，这是您编写的原始Html。

选择器

选择器是告诉jQuery要处理哪些元素的方式。大多数jQuery选择器与您在CSS中熟悉的相同，只是增加了一些特定于jQuery的选择器。您可以在其官方文档页面上查看jQuery selectors的完整列表。

要访问选择器，请使用jQuery符号$，后跟括号()：

1$("selector")

虽然也经常使用单引号的字符串，但jQuery样式guide，]更喜欢使用双引号的字符串。

下面是一些最常用的选择器的简要概述。

  • $() 通配符：** 选择页面上的每一个元素。
  • $(This) Current：** 选择函数内当前被操作的元素。
  • $() 标签：** 选择<p>标签的每个实例。
  • $() Class：** 这是SELECT_EVERY_ELEMENT，它应用了Example类。
  • $() ID：** 这将选择唯一的Exampleid的a_Single实例_。
  • $() 属性：** 选择任何type属性应用了text的元素。
  • $() 伪元素：** 选择第一个<p>。

通常，类和ID是您遇到最多的-当您想要选择多个元素时，类，以及当您想要只选择一个元素时，ID。

jQuery事件

在《你好，世界！》中例如，只要页面加载且文档准备就绪，代码就会立即运行，因此不需要用户交互。在这种情况下，您可以将文本直接写入到HTML中，而无需使用jQuery。但是，如果您希望通过单击按钮使文本显示在页面上，则需要使用jQuery。

返回到您的index.html文件并添加一个<按钮>元素。您将使用此按钮监听您的单击事件：

1[label index.html]
2...
3<body>
4
5<button id="trigger">Click me</button>
6<p id="demo"></p>

您将使用Click()方法调用包含Hello，World！的函数。代码：

1[label js/scripts.js]
2$(document).ready(function() {
3    $("#trigger").click();
4});

您的<Button>元素有一个名为rigger的ID，您可以使用$()选择它。通过添加Click()，您告诉它侦听点击事件，但您还没有完成。现在，您将在Click()方法中调用一个包含代码的函数：

1function() {
2    $("#demo").html("Hello, World!");
3}

以下是最终代码：

1[label js/scripts.js]
2$(document).ready(function() {
3    $("#trigger").click(function() {
4    $("#demo").html("Hello, World!");
5    });
6});

保存scripts.js文件，并在浏览器中刷新index.html。现在，当你点击按钮，你好，世界！文本将出现。

事件 是用户与浏览器交互的任何时候。这通常是通过鼠标或键盘来完成的。您刚刚创建的示例使用了一个Click事件。从官方的jQuery文档中，您可以查看jQuery事件methods.的完整列表下面是一些最常用的事件方法的简要概述。

  • click（) ** Click： 单击鼠标即可执行。
  • hover（) ** Hover： 当鼠标悬停在元素上时执行。mouseenter（)和mouseleave（)分别仅适用于鼠标进入或离开元素。
  • submit（) ** Submit： 在提交表单时执行。
  • scroll（) ** Scroll： 当屏幕滚动时执行。
  • keydown（) ** Keydown： 当你按下键盘上的一个键时执行。

要在用户向下滚动屏幕时使图像具有动画效果或淡入效果，请使用scroll()方法。要使用ESC键退出菜单，请使用keydown()方法。要制作下拉折叠菜单，请使用Click()方法。

了解事件对于使用jQuery创建动态网站内容至关重要。

jQuery效果

jQuery effects允许您在页面上添加动画或以其他方式操作元素，从而与事件协同工作。

您将创建一个打开和关闭弹出窗口覆盖图的示例。虽然您可以使用两个ID-一个用于打开覆盖图，另一个用于关闭覆盖图-但是您将使用一个类来打开和关闭具有相同函数的覆盖图。

从您的index.html文件的正文中删除当前的<Button>和<p>标签，并在您的HTML文档中添加以下内容：

1[label index.html]
2...
3<body>
4<button class="trigger">Open</button>
5
6<section class="overlay">
7  <button class="trigger">Close</button>
8</section>
9...

在您的style le.css文件中，您将使用最少量的css来隐藏带有display：nere的overlay，并将其居中显示在屏幕上：

 1[label css/style.css]
 2.overlay {
 3  display: none;
 4  position: fixed;
 5  top: 50%;
 6  left: 50%;
 7  transform: translate(-50%, -50%);
 8  height: 200px;
 9  width: 200px;
10  background: gray;
11}

回到scripts.js文件中，您将使用toglate()方法，该方法将在one和lock之间切换cssdisplay属性，并在单击时隐藏和显示覆盖：

1[label js/scripts.js]
2$(document).ready(function() {
3    $(".trigger").click(function() {
4        $(".overlay").toggle();
5    });
6});

刷新index.html。现在，您可以通过单击按钮来切换模式的可见性。您可以将togoble()更改为fadeTogger()或glideTogger()，以查看其他几个内置的jQuery效果。

下面是一些最常用的效果方法的简要概述。

  • 切换() 切换：** 切换一个或多个元素的可见性。show()和Hide()是相关的单向效果。
  • fadeTogger() 淡入淡出切换：** 切换一个或多个元素的可见性和不透明度。fadeIn()和fadeOut()是相关的单向效果。
  • glideTogger() 滑动切换** ：切换一个或多个元素的可见性，具有滑动效果。glideDown()和glideUp()是相关的单向效果。
  • Animate() Animate** ：对元素的css属性执行自定义动画效果。

您可以使用jQuery事件来侦听用户交互（例如单击按钮)，并使用jQuery效果在该操作发生后进一步操作元素。

结论

在本指南中，您了解了如何使用jQuery选择和操作元素，以及事件和效果如何协同工作来为用户提供交互式Web体验。

从这里开始，您应该对jQuery的功能有了更深的理解，并开始编写您自己的代码。

Published At
Categories with 技术
Tagged with
comments powered by Disqus