引言

和 JavaScript 是网络的三种基本语言。 我们用 HTML 构建我们的网站,用 CSS 设计它们的样式,并用 JavaScript 添加交互功能。 事实上,大多数动画和任何由用户点击、悬停或滚动导致的动作都是由 JavaScript 构建的。

Jquery 是“写得少,做得多”的 JavaScript 库。 它不是一种编程语言,而是一种用来使编写常见的 JavaScript 任务更加简洁的工具。 Jquery 还具有跨浏览器兼容的额外好处,这意味着您可以确定代码的输出将在任何现代浏览器中呈现。

通过比较简单的“ Hello,World! ” 在 JavaScript 和 jQuery 中,我们可以看到它们编写方式的不同。

JavaScript
document.getElementById("demo").innerHTML = "Hello, World!";
jQuery
$("#demo").html("Hello, World!");

这个简短的示例演示了 jQuery 如何以一种简洁的方式实现与纯 JavaScript 相同的最终结果。

目标

本指南假设没有 jQuery 的知识,并将涵盖以下主题:

  • 如何在 web 项目中安装 jQuery。
  • 重要 web 开发概念的定义,如 API、 DOM 和 CDN。
  • 常见的 jQuery 选择器、事件和效果。
  • 通过示例测试在本文中学到的概念。

先决条件

在你开始这个指南之前,你需要下面的东西:

  • 基本的 HTML 和 CSS 知识。 您应该已经知道如何建立一个简单的网站,并且对诸如 id、类和伪元素之类的 CSS 选择器有所了解。
  • 对编程基础的理解。 虽然在没有 JavaScript 高级知识的情况下开始编写 jQuery 是可能的,但是熟悉变量和数据类型的概念以及数学和逻辑将会大有帮助。

设置 jQuery

是一个 JavaScript 文件,你可以在 HTML 中链接到它。 在项目中包含 jQuery 有两种方法:

  • 下载本地版本。
  • 通过内容传递网路链接到一个文件。

注意: 内容传递网路服务器是一个由多个服务器组成的系统,它根据地理位置将网络内容发送给用户。 当你通过 CDN 链接到一个托管的 jQuery 文件时,它可能会比在你自己的服务器上托管更快更有效地到达用户。

我们将在示例中使用 CDN 来引用 jQuery。 你可以在 Google 的托管图书馆中找到最新版本的 jQuery。 如果你想下载它,你可以从官方网站上获得一份 jQuery 的拷贝。

我们将通过创建一个小型网络项目来开始这个练习。 它将包括 css / 目录中的 style.css、 js / 目录中的 scripts.js 和项目根目录中的主索引. html。

project/
├── css/
|   └── style.css
├── js/
|   └── scripts.js
└── index.html

首先,制作一个 HTML 框架并将其保存为 index. HTML。

index.html
<!doctype html>
<html lang="en">

<head>
  <title>jQuery Demo</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
</body>

</html>

链接到关闭 / body 标记之前的 jQuery CDN,然后是自定义的 JavaScript 文件 scripts.js。

index.html
<!doctype html>
<html lang="en">

<head>
  <title>jQuery Demo</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

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

</html>

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

注意: 如果您下载了一个 jQuery 的本地副本,请将其保存在 js / 文件夹中并链接到 js / jQuery。 4. min.js.

现在,jQuery 库已经加载到您的站点中,您可以完全访问 jQuery API。

注意: 应用程序编程接口(API)是一个允许软件程序相互交互的接口。 在这种情况下,jQuery 的 API 包含了访问 jQuery 所需的所有信息和文档。

使用 jQuery

它的核心是通过 DOM 连接浏览器中的 HTML 元素。

文档对象模型(DOM)是 JavaScript (和 jQuery)在浏览器中与 HTML 交互的方法。 要准确地查看 DOM 是什么,在您的 web 浏览器中,右键单击当前网页,选择 Inspect。 这将打开开发工具。 这里看到的 HTML 代码是 DOM。

每个 HTML 元素都被认为是 DOM 中的一个节点——一个 JavaScript 可以触摸的对象。 这些对象以树形结构排列,html 更接近根元素,每个嵌套元素都是树的一个分支。 Javascript 可以添加、删除和更改这些元素中的任何一个。

如果您再次右键单击该网站并单击查看网页来源,您将看到该网站的原始 HTML 输出。 起初很容易将 DOM 和 HTML 源码混淆,但它们是不同的——页面源码正是 HTML 文件中编写的内容。 它是静态的,不会改变,也不会受到 JavaScript 的影响。 Dom 是动态的,可以更改。

Dom 的最外层,即包装整个 html 节点的层,是文档对象。 要开始使用 jQuery 操作页面,我们需要首先确保文档已经“就绪”。

在 js / 目录中创建 scripts.js 文件,并输入以下代码:

js/scripts.js
$(document).ready(function() {
    // all custom jQuery will go here
});

你编写的所有 jQuery 代码都会包装在上面的代码中。 Jquery 会检测这种准备状态,所以函数中包含的代码只有在 DOM 准备好执行 JavaScript 代码时才会运行。 即使在某些情况下,在渲染元素之前 JavaScript 不会被加载,包括这个块被认为是最佳实践。

在本文的介绍中,您看到了一个简单的“ Hello,World! ” 脚本。 要启动此脚本并使用 jQuery 将文本打印到浏览器,首先我们将创建一个空块级别的 paragraph 元素,并将 ID demo 应用于该元素。

index.html
...
<body>

<p id="demo"></p>
...

Jquery 是用美元符号($)调用和表示的。 我们使用 jQuery 访问 DOM,主要使用 CSS 语法,并使用方法应用操作。 一个基本的 jQuery 例子遵循这种格式。

$("selector").method();

由于 ID 在 CSS 中由散列符号(#)表示,因此我们将使用 selector # demo 访问演示 ID。 Html ()是一个改变元素中 HTML 的方法。

我们现在要将我们的定制“ Hello,World! ” 在 jQuery ready ()包装器中编写代码。 在现有函数中添加这一行到 scripts.js 文件:

js/scripts.js
$(document).ready(function() {
    $("#demo").html("Hello, World!");
});

一旦你保存了这个文件,你可以在你的浏览器中打开你的索引文件。 如果一切工作正常,您将看到输出 Hello,World! .

如果您以前对 DOM 感到困惑,现在可以看到它的实际作用。 右击“ Hello,World! ” 然后选择 Inspect Element。 Dom 现在会显示 p id"demo"Hello,World! / p. 如果你查看页面源代码,你只会看到 p id"demo"/ p,我们写的原始 HTML。

选择器

选择器是我们告诉 jQuery 我们想要处理哪些元素的工具。 大多数 jQuery 选择器与您熟悉的 CSS 相同,只是添加了一些特定于 jQuery 的内容。 您可以在 jQuery 选择器的官方文档页面上查看它们的完整列表。

若要访问选择器,请使用 jQuery 符号 $,后跟括号()。

$("selector")

Jquery 样式指南首选双引号字符串,但也经常使用单引号字符串。

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

  • $(” * ”)-通配符: 选择页面上的每个元素。
  • $(this)-Current: 选择一个函数中正在操作的当前元素。
  • $(“ p”)-Tag: 选择 p 标记的每个实例。
  • $(". 类: 选择每一个已经将示例类应用到它的元素。
  • $(” # example”)-Id: 选择唯一示例 Id 的单个实例。
  • $(”[ type‘ text’]”)-属性: 选择应用于 type 属性的任何文本元素。
  • $(“ p: first-of-type”)-Pseudo Element: 选择第一个 p。

一般来说,当您想要选择多个元素时,类和 id 是您遇到的最多的类,当您想要只选择一个元素时,id 是您遇到的最多的类。

事件

在“你好,世界! ” 例如,代码在页面加载和文档准备就绪后立即运行,因此不需要用户交互。 在这种情况下,我们可以直接将文本写入 HTML,而无需使用 jQuery。 然而,如果我们想通过点击一个按钮使文本出现在页面上,我们需要使用 jQuery。

返回到索引文件并添加一个按钮元素。 我们将使用此按钮监听我们的点击事件。

index.html
...
<body>

<button id="trigger">Click me</button>
<p id="demo"></p>

我们将使用 click ()方法调用一个包含“ Hello,World! ”代码的函数。

js/scripts.js
$(document).ready(function() {
    $("#trigger").click();
});

我们的 button 元素有一个名为 trigger 的 ID,我们用 $(“ # trigger”)选择它。 通过添加 click () ,我们告诉它侦听一个单击事件,但是我们还没有完成。 现在,我们将在 click ()方法中调用一个包含代码的函数。

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

这是最终的代码。

js/scripts.js
$(document).ready(function() {
    $("#trigger").click(function() {
    $("#demo").html("Hello, World!");
    });
});

保存 scripts.js 文件,并在浏览器中刷新索引. html。 现在,当你点击这个按钮,“ Hello,World! ” 文本会出现。

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

  • 单击()-单击: 执行一次鼠标单击。
  • Hover ()-Hover: 当鼠标悬停在某个元素上时执行。 Mouseenter ()和 mouseleave ()分别只适用于进入或离开元素的鼠标。
  • Submit ()-Submit: 在提交表格时执行。
  • Scroll ()-Scroll: 在屏幕滚动时执行。
  • Keydown ()-Keydown: 当你按下键盘上的一个键时执行。

若要使图像在用户向下滚动屏幕时具有动画效果或淡入,请使用 scroll ()方法。 要使用 ESC 键退出菜单,请使用 keydown ()方法。 要制作下拉式手风琴菜单,请使用 click ()方法。

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

效果

Jquery 效果通过允许您在页面上添加动画和其他操作元素来与事件协同工作。

我们将作出一个例子,我们打开和关闭一个弹出覆盖。 虽然我们可以使用两个 id ——一个用于打开覆盖层,另一个用于关闭覆盖层——但是我们将使用一个类使用相同的函数打开和关闭覆盖层。

从你的索引文件中删除当前的按钮和 p 标签,然后在你的 HTML 文档中添加以下内容:

index.html
...
<body>
<button class="trigger">Open</button>

<section class="overlay">
  <button class="trigger">Close</button>
</section>
...

在我们的 style.CSS 文件中,我们将使用最少量的 CSS 来隐藏带 display: none 的覆盖,并将其置于屏幕中心。

css/style.css
.overlay {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 200px;
  background: gray;
}

回到 scripts.js 文件,我们将使用 toggle ()方法,它将在 none 和 block 之间切换 CSS 显示属性,单击时隐藏并显示覆盖。

js/scripts.js
$(document).ready(function() {
    $(".trigger").click(function() {
        $(".overlay").toggle();
    });
});

刷新索引。 您现在可以通过点击按钮来切换模态的可见性。 您可以将 toggle ()更改为 fadeToggle ()或 slideToggle () ,以查看其他一些内置的 jQuery 效果。

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

  • Toggle ()-Toggle: 开关一个或多个元素的可见性。 Show ()和 hide ()是相关的单向效果。
  • 淡出切换: 切换可见性并动画元素的不透明度。 Fadein ()和 fadeOut ()是相关的单向效应。
  • 滑动切换()-滑动切换切换带有滑动效果的一个或多个元素的可见性。 Slidedown ()和 slideUp ()是相关的单向效应。
  • Animate ()-Animate 对元素的 CSS 属性执行自定义动画效果。

我们使用 jQuery 事件来监听用户交互,比如单击一个按钮,我们使用 jQuery 效果来进一步操作发生后的元素。

总结

在本指南中,我们学习了如何使用 jQuery 选择和操作元素,以及事件和效果如何协同工作,为用户提供交互式 web 体验。

从这里开始,您应该对 jQuery 的功能有了更深入的了解,并且可以开始编写自己的代码了。