jQuery

###############

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：

什么是 jQuery?

jQuery 是一个轻量级的 “写的少，做的多” 的 JavaScript 库。

jQuery 是使在您的网站上使用 JavaScript 变得更加容易。

jQuery 接受了许多需要许多行 JavaScript 代码才能完成的常见任务，并将它们封装到可以用一行代码调用的方法中。

jQuery 还简化了 JavaScript 中许多复杂的事情，比如 AJAX 调用和 DOM 操作。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

提示: 除此之外，Jquery还提供了大量的插件。

为什么使用 jQuery ？

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

很多大公司都在使用 jQuery，例如:

Google
Microsoft
IBM
Netflix

向您的页面添加 jQuery 库

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version – 用于实际的网站中，已被精简和压缩。
Development version – 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jQuery.com 中下载。

jQuery 库是一个单独的 JavaScript 文件，您可以使用 HTML <script> 标记引用它（注意 <script> 标记应该位于 <head> 部分中）：

<head>
<script src="jquery-3.5.1.min.js"></script>
</head>

提示: 将下载的文件放在网页的同一目录下，就可以使用jQuery。

Microsoft CDN:

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>

Google CDN:

<head>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行”操作”（actions）。

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是: $(selector).action()

$ 美元符号定义 jQuery
(selector) 选择符”查询”和”查找” HTML 元素
action() 执行 jQuery 对元素的操作

示例

$(this).hide() – 隐藏当前元素

$("p").hide() – 隐藏所有 <p> 元素

$(".test").hide() – 隐藏所有 class=”test” 的所有元素

$("#test").hide() – 隐藏所有 id=”test” 的元素

文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

ready

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

在使用文档之前，最好等待文档完全加载并准备就绪。这允许您将 JavaScript 代码放在文档主体之前的 head 部分。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

提示: jQuery 还为 document ready 事件创建一个简洁写法（与以上写法效果相同）:

$(function(){

// jQuery 方法在这里…

});

以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。

###########################

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/289602.html