主页/jQuery教程/简介与入门/jQuery下载与应用

jQuery教程

jQuery下载与应用

4,693字
20–30 分钟

jQuery应用很简单，仅需将jQuery的js文件引入网页，即可进行jQuery的开发和使用。

目录

获取与引入jQuery

在网页中使用jQuery，首要步骤是将其库文件引入到HTML页面中。这通常通过两种方式实现：使用内容分发网络（CDN）或进行本地部署。选择合适的引入方式对页面加载速度和稳定性有直接影响。

引入方式实现方法特点与适用场景
使用CDN在HTML的<script>标签中填入jQuery库的CDN网址，例如：<script src="https://code.jquery.com/jquery-3.7.1.min.js">利用全球分布式服务器，加载速度快，且能利用浏览器缓存（若用户访问过同一CDN的其他站点）。适用于大多数线上生产环境。
本地引入将jQuery库文件下载至项目目录，然后通过相对或绝对路径进行引用，例如：<script src="/js/jquery-3.7.1.min.js">不依赖外部网络，可在离线环境或内网系统中使用。适用于开发阶段或对网络隔离有特殊要求的项目。

版本选择上，jQuery 3.x系列是现代开发的主流选择，它更轻量、支持Promise等新特性，并修复了旧版浏览器的兼容性问题。而jQuery 1.x系列则主要用于需要兼容IE6/7/8这类古老浏览器的极少数场景。在生产环境中，始终推荐使用最新稳定版本的jQuery，以获得性能提升和功能更新。

使用 npm 或 Yarn 下载 jQuery

jQuery 通过 jQuery 包发布在 npm 上。你可以用 npm CLI 安装最新版本的 jQuery：

npm install jquery

作为替代，你可以使用纱线CLI：

yarn add jquery

这会在目录中安装 jQuery。里面有未压缩版本、压缩版本和地图文件。node_modulesnode_modules/jquery/dist/

jQuery CDN

jQuery官方CDN：

<script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-4.0.0.module.min.js" integrity="sha256-d4LwM9D6pTkixVQVP66nz3BYd8ri7Uriz7C3X4qBAVE=" crossorigin="anonymous"></script>

更多版本参考：https://releases.jquery.com/

Microsoft CDN：

https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.js
https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js
https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.map
https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.slim.js
https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.slim.min.js
https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.slim.min.map

更多版本参考：https://learn.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0

CDNJS CDN：

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.map

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.min.map

更多版本参考：https://cdnjs.com/libraries/jquery/

jsDelivr CDN：

https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.js
https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.min.map
https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.slim.js
https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.slim.min.js
https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.slim.min.map

更多版本参考：https://cdn.jsdelivr.net/npm/jquery/

其他CDN：

CDN服务商引用示例（以jQuery 3.x版本为例）特点与说明
Google Hosted Librarieshttps://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.jsGoogle提供的稳定、高速服务，覆盖面广 。但因网络原因，在中国大陆地区的访问可能不稳定 。
BootCDNhttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js国内专门为开源项目提供加速服务的CDN，针对中国大陆网络环境进行了优化，速度和稳定性表现出色 。
Staticfile CDNhttps://cdn.staticfile.org/jquery/3.7.1/jquery.min.js由国内维护的常用静态资源公共库，提供了大量前端库的加速服务 。
百度CDNhttps://apps.bdimg.com/libs/jquery/3.7.1/jquery.min.js百度提供的公共库服务，对中国大陆用户有较好的加速效果 。
又拍云CDNhttps://upcdn.b0.upaiyun.com/libs/jquery/jquery-3.7.1.min.js又拍云提供的JS库CDN服务，是国内较早提供此类服务的平台之一 。
新浪CDNhttps://lib.sinaapp.com/js/jquery/3.7.1/jquery.min.js新浪云计算平台提供的公共库，同样适用于需要国内加速的场景 。

在选择CDN时，需综合考虑目标用户群体的网络环境、CDN服务的稳定性和更新频率。对于面向中国大陆用户的站点，优先选用国内CDN服务（如BootCDN、Staticfile、百度等）通常会获得更佳的加载性能 。为确保可靠性，可以考虑实施本地回退机制，即当CDN资源加载失败时，自动从本地服务器加载jQuery文件 。通过审慎选择合适的CDN服务，可以有效优化基于jQuery开发的网页应用的加载效率与用户体验。

启动入口：文档就绪事件

jQ​​ury代码必须在DOM（文档对象模型）加载完成后执行，以确保能正确地找到并操作页面元素。为此，jQuery提供了一个核心的入口函数，用于替代将JavaScript代码直接放在<body>底部或使用原生window.onload事件的方式。

$(document).ready()方法是启动jQuery应用的经典方式。它表示在DOM结构完全加载和解析后，立即执行内部包含的代码。其最简洁的缩写形式为$(function(){ ... })。这种方式优于window.onload，因为它不需要等待图片等外部资源加载完成，从而能更早地操作DOM，提升页面交互的响应速度。

// 推荐写法：文档就绪事件的标准形式
$(document).ready(function() {
    // 在此区域内编写jQuery代码，确保操作的元素已存在
    console.log('DOM已就绪，可以安全地操作元素了');
});

// 更简洁的缩写形式
$(function() {
    // 功能与上述完全一致
    $('#example-element').css('color', 'red');
});

应用场景与能力

jQuery的应用贯穿前端开发的多个核心领域，其本质是通过简化JavaScript操作，为网页添加丰富的动态功能和交互体验。jQuery的核心能力可以归纳为以下几个主要方面：

  1. DOM操作：这是jQuery最基础的应用。它允许开发者轻松地获取、创建、修改或删除页面上的任何元素及其内容。例如，动态更新一段文本、为一个列表添加新的项目，或者修改某个容器的结构，都可以通过简洁的jQuery代码实现。
  2. 事件处理：jQ​​uery提供了统一且简洁的语法来响应用户的交互行为，如点击、鼠标移动、键盘输入等。通过on()、click()、hover()等方法，可以为元素绑定事件处理函数。利用事件委托机制，还能高效处理动态添加的元素的事件，避免内存泄漏并提升性能。
  3. 动画与特效：jQ​​uery内置了一系列常用的动画效果，如淡入淡出（fadeIn/fadeOut）、滑动（slideDown/slideUp）和自定义动画（animate）。这些方法使开发者能够在不深入理解复杂CSS3动画或JavaScript定时器的情况下，快速构建出平滑的视觉过渡和动态效果。
  4. Ajax交互：jQuery极大地简化了异步数据请求的流程。通过$.ajax()、$.get()、$.post()等便捷方法，可以轻松地从服务器获取数据（如JSON、HTML、XML）并更新页面局部内容，实现页面的无刷新交互，这是构建现代单页应用或提升用户体验的关键技术。
  5. 插件扩展：jQuery强大的插件生态是其长盛不衰的重要原因。开发者可以利用jQuery提供的插件机制（$.fn），封装可复用的代码组件，如图片轮播、表单验证、日期选择器等。这不仅避免了重复造轮子，也使得复杂功能的实现变得更加模块化和易于维护。

jQuery凭借其对DOM操作、事件、动画和Ajax的简化封装，为开发者提供了一套高效、跨浏览器的工具箱。无论是快速制作简单页面的动态效果，还是构建复杂的、数据驱动的Web应用，jQuery都能提供坚实的基础支持。通过掌握其引入方式、入口函数及核心应用领域，即可开启jQuery的高效开发之旅。

最新发布