jQuery入门-代码号

回想我刚接触前端那会儿，用原生JavaScript写一个简单的段落显示隐藏，要写好几行 document.getElementById，还得手动判断 style.display 的当前值。后来遇到jQuery，那种“原来可以这么简洁”的触动至今记忆犹新。

jQuery的核心理念，就写在它官网上那句口号里——“Write Less， Do More”。它是一个快速、轻量的JavaScript库，把那些在原生JS里写起来很繁琐的操作，封装成一个个好记又短小的函数。无论是遍历DOM节点、处理用户交互事件，还是实现动画效果和异步请求，jQuery都能让你用少得多的代码达成目标。

它在你和浏览器提供的原生API之间，架起了一座更平坦、更统一的桥梁。

为什么选择jQuery：几个站得住脚的理由

1. 选择器语法：契合前端思维

jQuery的选择器机制直接复用了CSS的选择器规则。这意味着你不需要学习一套新的元素定位语言——会用 $(".class") 抓取类名，会用 $("#id") 抓取ID，会用 $("div p") 抓取嵌套关系。对于刚写完样式表转头来写交互逻辑的人来说，这种无缝切换的体验很友好。

2. DOM操作：告别冗余代码

操作页面上的HTML元素，比如往某个容器里添加一段内容、修改某个按钮的文字，在原生JS里通常是多步骤操作。jQuery把它抽象成 .html()、.text()、.append() 这类语义明确的方法。读代码时一眼就知道这段在干什么，维护成本自然会降下来。

3. 事件处理：跨浏览器的一致性保障

不同浏览器对事件模型的实现历史上存在很大差异。jQuery把 click、keydown、mouseenter 等常用事件封装成统一接口，屏蔽了底层的兼容性问题。你写一次，它在Chrome、Firefox、Edge里行为一致——这一点在还需要兼容老版本IE的时代，简直是救命级别的便利。

4. 动画与效果：即开即用

fadeIn、slideToggle、animate 这些内置动画方法，让你不必从零去写CSS过渡或JS计时器就能给页面注入生命力。对于常见的UI反馈需求，一行代码足以撑起体验。

5. AJAX简化：异步通信不再复杂

$.ajax() 及其快捷方法如 $.get()、$.post()，把原生的 XMLHttpRequest 封装成配置项清晰、回调明确的接口。在不刷新页面的前提下向服务器请求数据并局部更新页面，jQuery让这件事的门槛降到很低。

正视局限：什么时候应该三思

没有任何工具是万能的。jQuery也不例外，了解它的短板，能帮你在项目选型时做出更清醒的判断。

性能开销：对于简单的DOM查询或类名切换，原生JS的 querySelector 和 classList 已经能做到很快。如果你的项目只需少量交互，引入整个jQuery库可能反而不划算。
库体积：完整版的jQuery有几十KB（压缩后），对于移动端或需要极致加载速度的场景，这个体积值得掂量。不过现在CDN普及，缓存命中率能缓解一部分问题。
与数据绑定的差距：jQuery的设计模式是命令式的DOM操作——你告诉它“把这个元素改成什么内容”。而React、Vue等现在框架走的是声明式数据绑定路线——你只需声明数据和UI的映射关系，框架负责自动更新。对于复杂的数据驱动型应用，这种差异会影响后续的可维护性。
执行环境依赖：jQuery本质上是JavaScript，如果浏览器禁用了JS，它的所有功能都会失效。虽然这种情况现在少见，但做无障碍或降级方案时仍需考虑。

核心方法详解：jQuery html() 的三种面孔

.html() 是jQuery中出镜率很高的一个DOM操作方法，它有三种调用形式，各有各的用武之地。

调用形式	行为描述
`.html()`	不带参数，读取并返回第一个匹配元素的HTML内容。
`.html(content)`	传入字符串参数，覆盖所有匹配元素的HTML内容。
`.html(function(index, currentHtml))`	传入回调函数，根据当前索引和旧内容动态返回新值，逐一覆盖。

参数说明：

content：要设置的新内容，可以是纯文本，也可以包含HTML标签。
function(index, currentHtml)：回调函数。index 是当前元素在中的位置（从0开始），currentHtml 是该元素当前的HTML内容。函数返回值会被设为新内容。

示例一：用toggle()感受jQuery的简洁

这是一个入门级的基础示例，展示了jQuery如何处理点击事件并切换元素的可见性。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery入门示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        #myParagraph {
            display: none;
            color: green;
        }
    </style>
</head>
<body>

    <h2>用jQuery切换段落显示</h2>

    <button id="toggleButton">切换段落可见性</button>
    <p id="myParagraph">这段文字会通过jQuery来控制显示与隐藏。</p>

    <script>
        $(document).ready(function() {
            $("#toggleButton").click(function() {
                $("#myParagraph").toggle();
            });
        });
    </script>

</body>
</html>

这里 $(document).ready() 确保了页面的DOM结构加载之后才执行脚本，这个安全习惯可以避免脚本在元素生成之前就尝试去绑定事件导致的失效问题。

示例二：覆盖所有匹配元素的内容

当 .html() 带上字符串参数时，它会覆盖所有匹配元素的内部HTML。注意是所有匹配的元素，而不仅仅是第一个。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                // 把所有p元素的HTML内容替换成这句话
                $("p").html("Hello <b>编程学习网</b>");
            });
        });
    </script>
</head>
<body>
    <button>点击这里替换所有段落的内容</button>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
</body>
</html>

点击按钮后，两个  标签内的原始文字都会变成“Hello 编程学习网”。如果你想只修改某一个特定的段落，选择器就应该写得更精确，比如 $("#target") 或 $(".specific-class")。

示例三：读取内容——只返回第一个匹配项

当 .html() 不带参数时，它执行的是读取操作。这里有个很容易踩坑的细节：即使页面上有多个  元素，它也只返回第一个匹配元素的HTML内容。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                // 弹出第一个p元素的HTML内容
                alert($("p").html());
            });
        });
    </script>
</head>
<body>

<button>读取第一段的内容</button>

<p>这是第一个<b>段落</b>。</p>
<p>这是另一个<b>段落</b>。</p>
</body>
</html>

弹窗里只会显示“这是第一个段落。” 如果你需要拿到所有段落的HTML，可以用 .each() 遍历，或者用 $.map() 收集。

示例四：把HTML标签转换成纯文本

这是一个很有意思的小技巧。点击某个元素后，把它内部的HTML代码原样变成可见的文本。对于做代码展示、教学演示类的网页特别实用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>HTML转文本演示</title>
  <style>
    p {
      margin: 8px;
      font-size: 20px;
      color: blue;
      cursor: pointer;
    }
    b {
      text-decoration: underline;
    }
    button {
      display: inline-block;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>
  <b>点击这里</b>，可以把 <span id="tag">HTML</span> 标签转为文本显示
</p>

<script>
$( "p" ).click(function() {
  // 先拿到当前p元素内部的HTML字符串
  var htmlString = $( this ).html();
  // 再用text()方法把那段字符串当成纯文本设置回去
  $( this ).text( htmlString );
});
</script>

</body>
</html>

点击前，页面上看到的是浏览器渲染后的内容；点击后， 和  标签原原本本地以文本形式展现出来。这里的关键在于 .html() 返回的是包含标签的字符串，而 .text() 会自动将 < 和 > 转义成 < 和 >，从而避免了浏览器去解析它们。

本节课程知识要点

jQuery的核心理念：以“Write Less，Do More”为目标，将原生JS中冗长的操作封装为语义清晰的简练函数，提升开发效率与代码可读性。
选择器的CSS复用性：jQuery选择器直接沿用CSS语法，降低学习曲线，让前端开发者可以无缝迁移元素定位的经验。
.html() 的三种调用形式：无参为读取（仅返回第一个匹配元素），传字符串为批量覆写，传回调函数为基于当前内容的动态覆写。
读取与设置的行为差异：读取操作只作用于匹配集的第一个元素；设置操作会作用于所有匹配元素，需注意选择器的精确度。
.html() 与 .text() 的分工：前者识别并渲染HTML标签，后者将所有内容视为纯文本并自动转义特殊字符，是防止XSS注入和处理代码展示的基础防线。
性能与选型权衡：对于简单交互，原生JS足够轻快；对于复杂数据驱动的应用，React/Vue等框架更契合。jQuery适合中等复杂度的项目，或需要维护历史代码的场景。

本文标签：

jQuery入门