介绍
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的先验知识，并将涵盖以下主题：- 如何在web项目中安装jQuery。
- 重要的Web开发概念的定义，如API，DOM和CDN。
- 常见的jQuery选择器，事件和效果。
- 用于测试整篇文章中所学到的概念的示例。
先决条件
在开始本指南之前，您需要具备以下条件：- HTML和CSS的基本知识。您应该已经知道如何设置一个简单的网站，并且了解CSS选择器，如ids，类和伪元素。
- 理解编程的基础。虽然有可能开始编写jQuery没有JavaScript的高级知识，熟悉变量和数据类型的概念以及数学和逻辑将有助于显着。
设置jQuery
jQuery是一个JavaScript文件，您将在HTML中链接到它。在项目中包含jQuery的两种方法：- 下载本地副本。
- 通过内容分发网络（CDN）链接到文件。
css/目录中的
scripts.js ，
js/目录中的scripts.js以及项目根目录中的一个主
index.html 。
project/
├── css/
| └── style.css
├── js/
| └── scripts.js
└── index.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>
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
});
demo 。
index.html
...
<body>
<p id="demo"></p>
...
$ ）调用并表示。我们使用jQuery使用大多数CSS语法访问DOM，并使用方法应用操作。一个基本的jQuery示例遵循此格式。
$("selector").method();
# ）表示，因此我们将使用选择器
#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")
$("*")- 通配符：选择页面上的每个元素。$(this)- Current：选择在一个函数内操作的当前元素。$("p")- 标记：选择<p>标记的每个实例。$(".example")- 类：选择具有应用于它的example类的每个元素。$("#example")- Id：选择唯一exampleID的单个实例 。$("[type='text']")- 属性：选择任何带有应用于type属性的text元素。$("p:first-of-type")- 伪元素：选择第一个<p>。
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: none的
overlay ，并将其居中在屏幕上。
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
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属性执行自定义动画效果。
