jQuery简介

本指南将介绍如何在Web项目中安装jQuery的JavaScript jQuery库;重要的Web开发概念的定义,如API,DOM和CDN;常见的jQuery选择器,事件和效果;和测试在整篇文章中学习的概念的例子。

介绍

HTML,CSS和JavaScript是网络的三种基本语言。我们使用HTML构建网站,使用CSS对其进行风格化,并使用JavaScript添加交互式功能。事实上,大多数动画和任何由于用户点击,悬停或滚动而发生的动作都是使用JavaScript构建的。 jQuery是“写少,多做”JavaScript库。 它不是一种编程语言,而是一种用于使常见JavaScript任务更简洁的工具。 jQuery具有跨浏览器兼容性的额外好处,这意味着您可以确定代码的输出将在任何现代浏览器中呈现。 通过比较一个简单的“你好,世界!程序在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的基本知识。您应该已经知道如何设置一个简单的网站,并且了解CSS选择器,如ids,类和伪元素。
  • 理解编程的基础。虽然有可能开始编写jQuery没有JavaScript的高级知识,熟悉变量和数据类型的概念以及数学和逻辑将有助于显着。

设置jQuery

jQuery是一个JavaScript文件,您将在HTML中链接到它。在项目中包含jQuery的两种方法:
  • 下载本地副本。
  • 通过内容分发网络(CDN)链接到文件。
注意内容分发网络 (CDN)是由多个服务器组成的系统,它们根据地理位置向用户提供网络内容。 当您通过CDN链接到托管的jQuery文件时,与将您托管在自己的服务器上相比,它可能更快更有效地到达用户。 我们将在我们的示例中使用CDN来引用jQuery。您可以在Google的托管库中找到最新版本的jQuery。 如果你想下载它,你可以从官方网站获得jQuery的副本 。 我们将通过创建一个小型Web项目开始此练习。它将包括css/目录中的scripts.jsjs/目录中的scripts.js以及项目根目录中的一个主index.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.min.js链接到该文件。 此时,jQuery库现在正在加载到您的网站,并且您可以完全访问jQuery API注意:应用程序编程接口 (API)是允许软件程序相互交互的接口。 在这种情况下,jQuery的API包含访问jQuery所需的所有信息和文档。

使用jQuery

在其核心,jQuery用于通过DOM与浏览器中的HTML元素连接。 文档对象模型 (DOM)是JavaScript(和jQuery)与浏览器中的HTML交互的方法。 要查看DOM是什么,在您的Web浏览器中,右键单击当前网页,选择检查 。这将打开开发人员工具。您在这里看到的HTML代码是DOM。 每个HTML元素都被视为DOM中的一个节点 - JavaScript可以Touch的对象。 这些对象以树结构排列, <html>更靠近根,每个嵌套的元素都是沿着树的分支。 JavaScript可以添加,删除和更改任何这些元素。 如果您再次右键单击该网站并单击查看页面源 ,您将看到网站的原始HTML输出。首先很容易将DOM与HTML源混淆,但是它们不同 - 页面源正是HTML文件中写的。它是静态的,不会改变,不会受JavaScript的影响。 DOM是动态的,可以改变。 DOM的最外层,即包装整个<html>节点的层,是文档对象。要开始使用jQuery操作页面,我们需要首先确保文档是“ready”。 在js/目录中创建文件scripts.js ,然后键入以下代码:
js / scripts.js
$(document).ready(function() {
    // all custom jQuery will go here
});
所有你编写的jQuery代码都会包含在上面的代码中。 jQuery将检测到这个准备就绪状态,以便包含在此函数中的代码只有在DOM准备好执行JavaScript代码时才会运行。即使在某些情况下,JavaScript将不会加载,直到元素被渲染,包括这个块被认为是最佳实践。 在本文的介绍中,你看到了一个简单的“Hello,World!脚本。要启动此脚本并使用jQuery将文本打印到浏览器,首先我们将创建一个空的块级段落元素,并向其应用ID demo
index.html
...
<body>

<p id="demo"></p>
...
jQuery用美元符号( $ )调用并表示。我们使用jQuery使用大多数CSS语法访问DOM,并使用方法应用操作。一个基本的jQuery示例遵循此格式。
$("selector").method();
由于ID由CSS中的散列符号( # )表示,因此我们将使用选择器#demo访问演示ID。 html()是一个改变元素中的HTML的方法。 我们现在要把我们的习俗“你好,世界!程序里面的jQuery的ready()包装器。 将此行添加到现有函数中的scripts.js文件中:
js / scripts.js
$(document).ready(function() {
    $("#demo").html("Hello, World!");
});
保存文件后,您可以在浏览器中打开index.html文件。 如果一切正常,你会看到输出Hello, World! 。 如果你以前被DOM困惑,你可以看到它在行动中。右键点击“Hello,World!”文本,然后选择检查元素 。 DOM现在将显示<p id="demo">Hello, World!</p> 。 如果您查看网页源代码 ,您只会看到<p id="demo"></p> ,我们写的原始HTML。

选择器

选择器是我们如何告诉jQuery我们要工作的元素。大多数jQuery选择器与你在CSS中熟悉的选择器相同,只是添加了一些jQuery特性。您可以在其官方文档页面上查看jQuery选择器的完整列表 。 要访问选择器,请使用jQuery符号$ ,后跟括号()
$("selector")
双引号字符串是jQuery样式指南首选的,尽管单引号字符串也经常使用。 下面是一些最常用的选择器的简要概述。
  • $("*") - 通配符:选择页面上的每个元素。
  • $(this) - Current:选择在一个函数内操作的当前元素。
  • $("p") - 标记:选择<p>标记的每个实例。
  • $(".example") - 类:选择具有应用于它的example类的每个元素。
  • $("#example") - Id:选择唯一example ID的单个实例
  • $("[type='text']") - 属性:选择任何带有应用于type属性的text元素。
  • $("p:first-of-type") - 伪元素:选择第一个<p>
一般来说,类和ids是当你想选择多个元素时你将遇到最多的类,以及当你只想选择一个时使用id。

jQuery事件

在“你好,世界!例如,代码在加载页面并且文档准备就绪时运行,因此不需要用户交互。在这种情况下,我们可以将文本直接写入HTML而不用使用jQuery。但是,如果我们想通过点击按钮使文本出现在页面上,我们将需要使用jQuery。 返回到您的index.html文件并添加一个<button>元素。我们将使用此按钮来监听我们的点击事件。
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>元素有一个ID叫做trigger ,我们用$("#trigger") 。 通过添加click() ,我们告诉它监听点击事件,但我们还没有完成。 现在我们将在click()方法中调用一个包含我们的代码的函数。
function() {
    $("#demo").html("Hello, World!");
}
这里是最终的代码。
js / scripts.js
$(document).ready(function() {
    $("#trigger").click(function() {
    $("#demo").html("Hello, World!");
    });
});
保存scripts.js文件,并在浏览器中刷新index.html 。现在当你点击按钮,“你好,世界!文本将出现。 事件是用户与浏览器交互的任何时间。 通常这是通过鼠标或键盘完成的。 我们刚刚创建的示例使用了点击事件。 从官方jQuery文档,您可以查看jQuery事件方法的完整列表 。下面是一些最常用的事件方法的简要概述。
  • click() - 单击:单击鼠标即可执行。
  • hover() - 悬停:当鼠标悬停在元素上时执行。 mouseenter()mouseleave()仅适用于进入或离开元素的鼠标。
  • submit() - 提交:提交表单时执行。
  • scroll() - 滚动:在滚动屏幕时执行。
  • keydown() - 按键:当你按下键盘上的一个键时执行。
要使图像在用户向下滚动屏幕时动画或淡入,请使用scroll()方法。 要使用ESC键退出菜单,请使用keydown()方法。 要创建下拉式手风琴菜单,请使用click()方法。 了解事件对于使用jQuery创建动态网站内容至关重要。

jQuery效果

jQuery效果通过允许您添加动画和其他操作页面上的元素与事件携手合作。 我们将举一个例子,我们打开和关闭一个弹出式覆盖。虽然我们可以使用两个ID - 一个打开覆盖而另一个关闭它 - 我们将使用一个类来打开和关闭具有相同功能的覆盖。 从index.html文件正文中删除当前的<button><p>标记,并将以下内容添加到HTML文档中:
index.html
...
<body>
<button class="trigger">Open</button>

<section class="overlay">
  <button class="trigger">Close</button>
</section>
...
在我们的style.css文件中,我们将使用最少的CSS来隐藏带有display: noneoverlay ,并将其居中在屏幕上。
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()方法,该方法将在noneblock之间切换CSS display属性,隐藏并在单击时显示叠加。
js / scripts.js
$(document).ready(function() {
    $(".trigger").click(function() {
        $(".overlay").toggle();
    });
});
刷新index.html 。 现在,您可以通过单击按钮来切换模态的可见性。 您可以将toggle()更改为fadeToggle()slideToggle()以查看其他一些内置的jQuery效果。 下面是一些最常用的效果方法的简要概述。
  • toggle() - 切换:切换元素或多个元素的可见性。 show()hide()是相关的单向效果。
  • fadeToggle() - Fade Toggle:切换可见性并动画化一个或多个元素的不透明度。 fadeIn()fadeOut()是相关的单向效果。
  • slideToggle() - 滑动切换使用滑动效果切换一个或多个元素的可见性。 slideDown()slideUp()是相关的单向效果。
  • animate() - Animate对元素的CSS属性执行自定义动画效果。
我们使用jQuery事件来监听用户交互,例如点击按钮,我们使用jQuery效果来进一步操作元素,一旦动作发生。

结论

在本指南中,我们学习了如何使用jQuery选择和操作元素,以及事件和效果如何协同工作,为用户提供交互式Web体验。 从这里,你应该更深入地了解jQuery的功能,并在你的方式来编写自己的代码。