jQuery 简介

jQuery 是一个轻量级、开源的 JavaScript 库，诞生于 2006 年，核心目标是 “Write Less, Do More”（写更少的代码，做更多的事）。

jQuery 封装了原生 JavaScript 中繁琐的 DOM 操作、事件处理、动画效果、AJAX 请求等功能，解决了不同浏览器之间的兼容性问题，让开发者可以用更简洁的语法完成复杂的前端操作。

简单来说，原生 JavaScript 要写十几行的 DOM 操作，jQuery 可能一行就能搞定，且无需担心浏览器兼容问题。

jQuery 的优势

jQuery 主要拥有如下优势：

• 简洁的选择器：兼容 CSS 选择器语法，快速定位页面元素（比如$('#name')选 ID 为 name 的元素）。

• 链式调用：同一个元素的多个操作可以连写，比如$('#name').show().addClass('active').fadeOut()。

• 跨浏览器兼容：自动处理 IE、Chrome、Firefox 等浏览器的兼容性差异，开发者无需额外适配。

• 丰富的功能：内置 DOM 操作、事件绑定、动画、AJAX、工具方法（如数组 / 对象处理）等。

• 插件生态：拥有海量第三方插件（如轮播、表单验证、日历），扩展能力极强。如下图：

jQuery广告

为什么使用 jQuery ？

下面提供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 的知识请阅读后续教程。