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, 例如:
- Microsoft
- IBM
- Netflix
向您的页面添加 jQuery 库
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:
- 从 jquery.com 下载 jQuery 库
- 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
下载 jQuery:https://jquery.com/download/
有两个版本的 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 is registered as a package on npm. You can install the latest version of jQuery with the npm CLI command:
npm install jquery
If you have access to Git, you can connect to the repository here:
git clone git://github.com/jquery/jquery.git
You can also check out and build a specific version of jQuery from GitHub:
git clone git://github.com/jquery/jquery.git
git checkout 1.2.6
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 方法。
###########################