jQuery 简介

在动手装环境之前，我们先认识一下 jQuery 到底是什么、为什么曾经统治 Web、为什么今天仍然值得学。理解了背景，学习的时候会更有的放矢。

jQuery 是什么？

jQuery 是美国工程师 John Resig 在 2006 年 1 月于 BarCamp NYC 上首次发布的 JavaScript 库。它的目标是：把当时痛苦不堪的 DOM 操作、事件绑定、AJAX 请求、浏览器兼容问题全部封装成一套极简 API，让前端开发者能用最少的代码完成最多的事——口号正是 "Write Less, Do More"（写得更少，做得更多）。

诞生背景：浏览器大战的"黑暗年代"

要理解 jQuery 为什么火，得回到 2005-2006 年的前端世界。当时 IE6 占有率超过 80%，Firefox 刚崛起，Safari、Opera 各占一席，每个浏览器对同一套 JavaScript API 的实现都不一样：

那个年代写一段"点按钮弹窗"都要写一长串 if/else 判断浏览器，看下面这段对比就懂 jQuery 多省事：

// 2006 年用原生 JS 选中元素 + 绑事件,要写一堆浏览器判断
function addEvent(el, type, fn) {
  if (window.addEventListener) {
    el.addEventListener(type, fn, false);
  } else if (window.attachEvent) {
    el.attachEvent("on" + type, fn);
  } else {
    el["on" + type] = fn;
  }
}

var btn = document.getElementById ? document.getElementById("btn")
          : document.all.btn;

addEvent(btn, "click", function () {
  alert("被点了");
});

// 而 jQuery 一行搞定
$("#btn").on("click", function () {
  alert("被点了");
});

jQuery 把上面这些差异全部抹平，开发者只管调用 on、click，背后兼容性它替你处理。这就是它当年迅速统治 Web 的根本原因。

核心设计理念

jQuery 的 API 设计在当年极具颠覆性，影响了之后无数库。它的几个标志性理念：

第一个 jQuery 页面

说再多不如看代码。下面是一个完整的可运行页面，把它保存为 hello.html 双击打开就能跑：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>第一个 jQuery 页面</title>
  <!-- 引入 jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
  <h1 id="title">点下面的按钮</h1>
  <button id="btn">点我</button>

  <script>
    // 等待 DOM 加载完成
    $(document).ready(function () {
      $("#btn").on("click", function () {
        $("#title").text("Hello, jQuery!").css("color", "red");
      });
    });
  </script>
</body>
</html>

几个关键点：script 标签从官方 CDN 引入 jQuery；$(document).ready 等 DOM 加载完再执行（避免选不到元素）；$("#btn") 用 CSS 选择器选中按钮；.text().css() 是链式调用——jQuery 的全部精髓都在这十来行代码里。

jQuery 都用在哪？

虽然在新项目里 jQuery 已经被 React/Vue 替代，但它远没"死"，下面这些场景它仍是主力：

jQuery vs 现代框架

该不该学 jQuery？

结论是：新项目别用 jQuery，但一定要会读 jQuery。理由很简单：互联网上仍有过半网站用的是 jQuery，接手老项目、改 WordPress 主题、维护企业系统时，你不可能要求重写。学 jQuery 不需要花很久，会 CSS 选择器 + 五六个核心方法就能读懂 80% 的代码。本系列会把"该学的"和"过时的"都讲清楚，让你既能维护老代码，也不被老写法带偏。

← 返回 jQuery 教程目录

下一篇 引入 jQuery →

✈️💬