jQuery 是一个轻量级、开源的 JavaScript 库，诞生于 2006 年，核心目标是 “Write Less, Do More”（写更少的代码，做更多的事）。
jQuery 封装了原生 JavaScript 中繁琐的 DOM 操作、事件处理、动画效果、AJAX 请求等功能，解决了不同浏览器之间的兼容性问题，让开发者可以用更简洁的语法完成复杂的前端操作。
简单来说，原生 JavaScript 要写十几行的 DOM 操作，jQuery 可能一行就能搞定，且无需担心浏览器兼容问题。
jQuery 主要拥有如下优势：
简洁的选择器：兼容 CSS 选择器语法，快速定位页面元素（比如选 ID 为 name 的元素）。
链式调用：同一个元素的多个操作可以连写，比如。
跨浏览器兼容：自动处理 IE、Chrome、Firefox 等浏览器的兼容性差异，开发者无需额外适配。
丰富的功能：内置 DOM 操作、事件绑定、动画、AJAX、工具方法（如数组 / 对象处理）等。
插件生态：拥有海量第三方插件（如轮播、表单验证、日历），扩展能力极强。如下图：
下面提供5个使用 jQuery 的理由：
（1）极大简化 DOM 操作
原生 JS 操作 DOM 代码冗长且不直观，jQuery 用极简的语法实现相同功能：
// 原生 JS：获取元素 + 修改文本 + 改样式（需写多行）
const demo = document.getElementById('demo');
demo.innerText = '新内容';
demo.style.color = 'blue';
// jQuery：一行链式调用搞定（定位+操作+样式）
$('#demo').text('新内容').css('color', 'blue');（2）彻底解决浏览器兼容性问题
这是 jQuery 最核心的价值之一。不同浏览器（尤其是早期 IE）对原生 JS 的支持差异极大，开发者需要写大量兼容代码：
// 原生 JS：绑定事件的兼容写法（IE8及以下不支持addEventListener）
const btn = document.getElementById('btn');
if (btn.addEventListener) {
btn.addEventListener('click', fn); // 现代浏览器
} else if (btn.attachEvent) {
btn.attachEvent('onclick', fn); // IE8-
}
// jQuery：无需关心浏览器，一行搞定
$('#btn').click(fn);（3）简化异步请求（AJAX）
原生 JS 的 AJAX（XMLHttpRequest）代码繁琐且易出错，jQuery 封装了简洁的 AJAX 方法：
// 原生 JS：发送 GET 请求（简化版，仍需处理兼容和状态）
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
}
};
xhr.send();
// jQuery：一行发送 GET 请求，自动处理解析和异常
$.get('/api/data', function(data) {
// 直接使用解析后的 data
}).error(function() {
// 异常处理
});（4）内置丰富的动画和特效
原生 JS 实现简单的动画（如淡入淡出、滑动）需要手动操作定时器和样式，jQuery 内置了大量开箱即用的动画方法：
// 原生 JS：实现淡入效果（需手动计算透明度，写定时器）
const el = document.getElementById('demo');
let opacity = 0;
el.style.opacity = 0;
const timer = setInterval(() => {
opacity += 0.1;
el.style.opacity = opacity;
if (opacity >= 1) clearInterval(timer);
}, 50);
// jQuery：一行实现淡入（1000 毫秒完成）
$('#demo').fadeIn(1000);（5）支持链式调用，代码更简洁
jQuery 几乎所有方法都会返回当前对象，因此可以把多个操作连在一起写，避免重复选择元素：
// 链式调用：选中元素 → 显示 → 改文本 → 加样式 → 执行动画
$('#demo').show().text('Hello').css('font-size', '20px').animate({marginTop: '20px'}, 500);更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098