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

原创 小智  2020-11-29 16:05  阅读 243 次

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 库,然后把它包含在希望使用的网页中。

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

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

1、本地引入 jQuery 文件

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

本地引入jQuery文件

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
关注我们:请关注一下微信号:扫描二维码爱思智前端的微信号
版权声明:本文为原创文章,版权归 小智 所有,欢迎分享本文,转载请保留出处!

发表评论


表情