目录
（三）使用包管理器（如 npm、yarn）引入（适用于基于构建工具的项目）
一、jQuery 是什么
在前端开发的广袤天地里，JavaScript 无疑是一门举足轻重的编程语言，它赋予了网页灵动的交互性与丰富的动态效果 ，让用户与页面之间能够展开多样化的互动。然而，原生 JavaScript 的语法与 API 有时显得过于繁杂，在实际开发过程中，开发者常常会遭遇诸多挑战。而 jQuery 的出现，就像是为开发者们点亮的一盏明灯，它极大地简化了 JavaScript 的编程过程。
jQuery 是一个快速、简洁且功能强大的 JavaScript 库，其设计宗旨是 “Write less，do more” ，也就是倡导用更少的代码，实现更多的功能。它将大量常用的操作与功能进行了封装，使得开发者在处理 DOM 操作、事件处理、动画效果以及 Ajax 交互等任务时，能够更加得心应手。例如，当我们想要获取页面上某个元素时，原生 JavaScript 可能需要使用document.getElementById('idName')这样较为冗长的代码；而在 jQuery 中，只需使用$('#idName')就能轻松实现，代码量大幅减少，却达到了相同甚至更好的效果 。这种简洁的语法不仅提高了开发效率，还让代码的可读性和可维护性得到了显著提升，让开发者能够将更多的精力投入到功能的实现与优化上。
二、为什么选择 jQuery
在前端开发领域，当面对众多技术和工具的选择时，为什么我们要将目光投向 jQuery 呢？与原生 JavaScript 相比，jQuery 具有多方面的显著优势。
（一）强大的兼容性
在过去，不同浏览器对 JavaScript 的支持存在着各种各样的差异，这给开发者带来了极大的困扰。以获取页面元素为例，在 IE 浏览器中，可能需要使用特定的document.all方法来获取元素，而在 Firefox 等其他浏览器中则不支持这种方式，需要使用document.getElementById等标准方法 。这就意味着开发者要针对不同的浏览器编写不同的代码来实现相同的功能，代码量大幅增加，开发效率降低，且后期维护成本高昂。
而 jQuery 的出现，很好地解决了这一难题。它通过内部的兼容性处理机制，为开发者提供了统一的 API 接口 。无论你使用的是 IE6 这样古老的浏览器，还是 Chrome、Firefox 等现代浏览器，使用 jQuery 编写的代码都能稳定运行。例如，在绑定点击事件时，使用原生 JavaScript，可能需要针对不同浏览器对addEventListener和attachEvent方法进行兼容性处理；而使用 jQuery，只需简单地使用$(selector).click(function() { /* 事件处理代码 */ })，就能轻松实现跨浏览器的点击事件绑定，极大地减少了开发者在兼容性方面所花费的时间和精力 。
（二）简洁强大的选择器
原生 JavaScript 在选择页面元素时，方法相对有限且不够灵活。例如，要获取页面中某个特定类名的所有元素，需要使用document.getElementsByClassName方法，该方法返回的是一个类似数组的对象，操作起来不太方便；如果要进行更复杂的选择，如选择某个父元素下特定位置的子元素，原生 JavaScript 的代码会变得冗长且复杂 。
jQuery 则拥有一套强大且简洁的选择器，它借鉴了 CSS 选择器的语法，使得元素选择变得轻而易举。比如，要选择页面中所有class为example的div元素，只需使用$('div.example')即可；若要选择某个id为container的元素下的第一个li元素，使用$('#container li:first')就能快速定位 。这种简洁而强大的选择器语法，不仅提高了代码的编写效率，还增强了代码的可读性，让开发者能够更直观地理解代码的意图。
（三）便捷的链式操作
在原生 JavaScript 中，当对一个元素进行多个操作时，代码会显得较为繁琐。例如，要先获取一个元素，然后为其添加一个类名，再修改其文本内容，代码可能如下：
const element = document.getElementById('myElement');
element.classList.add('newClass');
element.textContent = '新的文本内容';
而在 jQuery 中，通过链式操作，我们可以将这些操作写在同一行代码中，使代码更加简洁和优雅：
$('#myElement').addClass('newClass').text('新的文本内容');
这种链式操作的方式，就像是给代码赋予了一种流畅的 “连贯性”，开发者可以一气呵成地完成多个对元素的操作，无需反复获取元素，减少了代码量，也降低了出错的概率 。
（四）丰富的插件生态系统
原生 JavaScript 在实现一些特定功能时，往往需要开发者从头开始编写大量代码。比如实现一个图片轮播效果，需要处理图片的切换逻辑、动画效果、用户交互等多个方面，代码量较大且容易出错 。
jQuery 拥有庞大的插件生态系统，开发者可以通过引入各种插件来快速实现复杂功能。以图片轮播为例，只需引入像Slick这样的 jQuery 插件，通过简单的配置就能轻松实现一个功能丰富、效果精美的图片轮播组件 。这些插件经过了众多开发者的测试和优化，稳定性和可靠性较高，大大节省了开发时间和精力 。同时，开发者还可以根据自己的需求对插件进行定制和扩展，进一步提升开发效率和项目的灵活性 。
三、搭建开发环境
在正式开启 jQuery 的学习之旅前，我们首先需要搭建好开发环境，也就是要将 jQuery 库引入到我们的项目中 。引入 jQuery 库主要有以下几种方式：
（一）本地下载引入
- 下载 jQuery 库：访问jQuery 官方网站，在下载页面中，你会看到有不同版本的 jQuery 可供下载 。通常分为开发版本（development）和生产版本（production，也叫压缩版本，minified） 。开发版本的代码未经压缩，便于在开发过程中进行调试，查看代码逻辑；而生产版本经过压缩，去除了注释和不必要的空白字符，文件体积更小，适合在项目上线时使用，以提高页面加载速度 。选择你需要的版本，点击下载按钮，将其保存到本地项目的指定目录中，比如项目根目录下的js文件夹 。
- 在 HTML 文件中引入：在你的 HTML 文件中，通过<script>标签来引入下载好的 jQuery 库文件 。假设你将jquery.min.js文件放在了js文件夹中，那么在 HTML 文件的<head>标签内（也可以放在<body>标签的末尾，一般建议放在<head>标签内，以便尽早加载脚本）添加如下代码：
<head>
<script src="js/jquery.min.js"></script>
</head>
这样，就完成了通过本地下载方式引入 jQuery 库 。
（二）通过 CDN 引入
CDN（Content Delivery Network，内容分发网络）是一种通过在多个地理位置分布的服务器上缓存和分发内容，以提高内容传输速度和可用性的技术 。许多知名的 CDN 服务提供商都提供了 jQuery 库的托管服务，如百度静态资源公共库、cdnjs等 。通过 CDN 引入 jQuery 库，无需下载到本地，直接在 HTML 文件中使用 CDN 链接即可 。
以使用百度静态资源公共库的 jQuery 3.6.0 版本为例，在 HTML 文件的<head>标签内添加以下代码：
<head>
<script src="https://libs.baidu.com/jquery/3.6.0/jquery.min.js"></script>
</head>
使用 CDN 引入的优点是方便快捷，并且 CDN 服务器通常具有较高的稳定性和缓存机制，用户在访问页面时，如果浏览器已经缓存了该 CDN 上的 jQuery 库，那么加载速度会非常快 。同时，由于 CDN 服务提供商通常会对文件进行优化，所以也能在一定程度上提高页面性能 。但缺点是如果 CDN 服务器出现故障或者网络不稳定，可能会影响到页面中 jQuery 功能的正常使用 。
（三）使用包管理器（如 npm、yarn）引入（适用于基于构建工具的项目）
如果你正在使用像 Webpack、Gulp 等构建工具进行项目开发，那么可以使用包管理器来安装和引入 jQuery 。以 npm（Node Package Manager）为例：
- 初始化项目：在项目根目录下打开命令行工具，执行npm init -y命令，这会快速生成一个package.json文件，用于管理项目的依赖和相关配置 。
- 安装 jQuery：执行npm install jquery命令，npm 会自动从 npm 仓库下载 jQuery 库及其依赖，并将其安装到项目的node_modules文件夹中 。
- 在项目中引入：在你的 JavaScript 文件（例如main.js）中，使用import或require语句来引入 jQuery 。如果你的项目使用的是 ES6 模块语法，可以使用import：
import $ from 'jquery';
如果是 CommonJS 模块语法，则使用require：
const $ = require('jquery');
使用包管理器引入的好处是方便管理项目依赖，并且可以轻松升级或降级 jQuery 库的版本 。同时，在构建过程中，构建工具可以对引入的库进行进一步的优化和处理 。
四、基本语法与选择器
（一）基本语法
在 jQuery 的世界里，有两个基础且关键的语法，它们是我们开启丰富交互功能大门的钥匙，那就是$(document).ready()和$() 。
- $(document).ready()：这个函数是 jQuery 中非常重要的一个函数，它的作用是当整个 HTML 文档被加载和解析完成后，才会执行其中的代码，而无需等待页面中所有的图像、脚本、样式表等资源都完全加载完毕 。在实际开发中，这是非常必要的，因为如果我们在 DOM（文档对象模型）还未准备好的时候就尝试对页面元素进行操作，很可能会出现错误，比如获取不到元素、无法绑定事件等 。
例如，当我们想要在页面加载完成后，给一个按钮添加点击事件时，可以这样写：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery ready示例</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="myButton">点击我</button>
<script>
$(document).ready(function () {
$('#myButton').click(function () {
alert('按钮被点击了！');
});
});
</script>
</body>
</html>
在上述代码中，$(document).ready()确保了$('#myButton').click(...)这段绑定点击事件的代码是在id为myButton的按钮元素被加载到 DOM 中之后才执行的，这样就能保证点击事件的正确绑定和触发 。同时，$(document).ready()还有一种简洁的写法，在 jQuery 3.0 及之后的版本中，我们可以直接写成$(function () {... }) ，这种写法更加简洁明了，减少了代码量，在实际开发中使用起来非常方便 。例如：
$(function () {
$('#myButton').click(function () {
alert('按钮又被点击了！');
});
});
- $()：$()函数是 jQuery 的核心函数之一，它就像是一个强大的 “元素选择器和操作器” 。$()函数可以接受多种类型的参数，从而实现不同的功能 。最常见的是接受一个 CSS 选择器作为参数，用于选取页面中的元素 。比如，$('#idName')表示选取id为idName的元素；$('.className')表示选取所有class为className的元素；$('div')表示选取页面中所有的div元素 。除了选择元素，$()函数还可以接受一个 DOM 对象、document对象或者window对象作为参数，将其转换为 jQuery 对象，以便使用 jQuery 提供的各种方法 。例如，我们先通过原生 JavaScript 获取一个 DOM 元素，然后将其转换为 jQuery 对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$()函数示例</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="myDiv">这是一个div</div>
<script>
// 通过原生JavaScript获取DOM元素
var domElement = document.getElementById('myDiv');
// 将DOM元素转换为jQuery对象
var $jqElement = $(domElement);
// 使用jQuery方法修改元素文本
$jqElement.text('这是修改后的div文本');
最低0.47元/天 解锁文章
扫一扫
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
