JavaScript框架jQuery的下载安装及引入使用语法实例_jQuery

JQuery，顾名思义，也就是JavaScript和查询（Query），是一个快速，小巧，轻量的，免费开源的JS函数库，能够极大的简化JS代码。并且它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

下载 jQuery

可以从 jquery.com 中下载。有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站（即上线项目）中，已被精简和压缩的版本：jquery-3.3.1.min.js 。
Development version - 用于测试和开发（未压缩的版本：jquery-3.3.1.js ，是可读的代码）。

网页中jQuery库的引入与使用

如需使用 jQuery，您需要下载 jQuery 库，然后把它包含在希望使用的网页中。

jQuery 函数库本身是一个 JavaScript 文件。使用 HTML 的 <script> 标签引用它。

PS：请注意，<script> 标签应该位于页面的 <head> 部分。

1、本地引入 jQuery 文件

<head>
<!-- 引入jQuery 的函数库 -->
<script src="jquery-3.3.1.min.js"></script>
</head>

FAQ常见问题

在引入的过程中，经常会出现文件引入失败的错误。

文件引入失败是往往是由于jQuery库文件的路径错误导致的！

2、从 CDN 公共库中载入 jQuery 文件

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

<head>
<!-- Staticfile CDN -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<!-- 百度 CDN -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- 又拍云 CDN -->
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

<!-- 新浪 CDN -->
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

<!-- Google CDN 不大推荐使用Google CDN来获取版本，因为Google产品在中国很不稳定。 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Microsoft CDN -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>

温馨提示

使用 Staticfile CDN、百度、又拍云、新浪、谷歌或微软的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

jQuery 基础语法

jQuery 语法是通过选取（查询，query） HTML 元素，并对选取的元素执行某些“操作”（actions）。

基础语法：$(selector).action()

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

jQuery 语法实例。演示 jQuery hide() 函数

$(this).hide() - 隐藏当前的 HTML 元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
$(".test").hide() - 隐藏所有 class="test" 的所有元素

你对 CSS 选择器熟悉吗？

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

文档就绪事件

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

<script>
<!-- 两种方式实现文档就绪后执行 jQuery 方法 -->
//jQuery 入口函数
$(document).ready(function(){ 
   // 开始写 jQuery 代码... 
});

//简洁写法（与以上写法效果相同）
$(function(){ 
   // 开始写 jQuery 代码... 
});

//JavaScript 入口函数:
window.onload = function () {
    // 执行代码
}
</script>

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

jQuery 入口函数与 JavaScript 入口函数的区别

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
ready()方法他的执行速度更快于window.onload 。内部原理忽略不计。
页面中只用一个.ready()方法（可以存在多个，但是并不科学。）
window.onload与.ready()方法可以共存意味着可以同时使用。但是并不意味着，这两个方法同时存在是合理的。一个页面我们习惯只放一个.ready()方法。这样不会让页面的逻辑混乱，会增加代码的可读性。

本文地址：http://aszhi.com/jishu/jquery/60.html
关注我们：请关注一下微信号：扫描二维码爱思智前端的微信号