jQuery介绍-代码号

jQuery，这个耳熟能详的名字，在过去很长一段时间里几乎是前端开发的代名词。即便在今天，各种现在前端框架层出不穷，理解 jQuery 的设计哲学，对于深入掌握 JavaScript 和 DOM 操作依然大有裨益。

到底什么是 jQuery？

简单说，jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它把很多原生的 JavaScript 操作封装成了简单易用的函数，让我们能用更少的代码，做更多的事情。

我个人最初接触前端时，对冗长的原生 DOM 选择器和事件绑定感到头疼，而 jQuery 的出现，让一切都变得直观起来。核心思想就是：“Write Less, Do More”（写更少，做更多）。它极大地简化了 HTML 文档的遍历与操作、事件处理、动画效果以及 Ajax 交互，并且屏蔽了不同浏览器之间的差异，实现了“跨平台”的兼容性。

学习前的准备

在翻开 jQuery 这本书之前，你至少需要对 JavaScript 的基础知识有所了解，比如变量、函数、数据类型和基本的对象概念。jQuery 本质上就是 JavaScript，只是换了一种更便捷的调用方式。没有 JS 基础就直接上手 jQuery，会让你知其然却不知其所以然。

第一个 jQuery 示例

让我们从一个简单的例子开始，感受一下 jQuery 的魔法。假设我们有一个 HTML 页面，你想把其中所有 <p> 标签的背景色改成粉红色。

用原生 JavaScript 写，大概需要这么做：

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.backgroundColor = "pink";
}

而用 jQuery，一行代码足矣。以下是完整的 firstjquery.html 文件代码：

<!DOCTYPE html>  
<html>  
<head>  
    <title>初探 jQuery 示例</title>  
    <!-- 1. 引入 jQuery 库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
    <!-- 2. 编写我们的 jQuery 代码 -->
    <script>  
    $(document).ready(function() {  
        $("p").css("background-color", "pink");  
    });  
    </script>  
</head>  
<body>  
    <p>这是第一个段落。</p>  
    <p>这是第二个段落。</p>  
    <p>这是第三个段落。</p>  
</body>  
</html>

页面上三个段落的背景色都会变成粉红色。在这个过程中，$ 符号就是 jQuery 的入口，$(document).ready() 确保了所有 DOM 元素加载完毕后才执行内部代码，这是防止因元素未加载而导致脚本失效的关键一步。

jQuery 的核心：选择器

jQuery 的魔力之一在于其强大的选择器引擎，它几乎完整支持了 CSS1 到 CSS3 的各种选择器。这正是“Write Less”的精髓。

本节课程知识要点

元素选择器：直接选取 HTML 标签。
ID 选择器：选取特定 ID 的单个元素，这是最直接高效的选取方式。
类选择器：选取一组拥有相同 class 的元素。

为什么用 $("#id") 而不用 document.getElementById("id")？原因在于，jQuery 对象提供了链式操作和丰富的内置方法，让你可以一个接一个地调用不同功能，无需反复查询 DOM。比如，你可以连续地修改一个元素的样式、文本和注册事件，代码的流畅性和可读性远高于原生写法。

再看一个综合示例，假如我们想让 ID 为 mainTitle 的标题变蓝，同时让所有 highlight 类的元素显示一条边框：

<script>
$(document).ready(function() {
    // ID 选择器
    $("#mainTitle").css("color", "blue");
    // 类选择器
    $(".highlight").css("border", "1px solid red");
});
</script>

<h1 id="mainTitle">这是一个标题</h1>
<p class="highlight">这是要高亮显示的段落。</p>
<span class="highlight">这是一个高亮按钮。</span>

玩转 jQuery 事件

网页之所以有生命力，是因为它能响应用户的操作，如点击、移动鼠标、按下键盘等。jQuery 对事件的处理同样优雅。

常见的事件方法有 click()、mouseover()、mouseout()、keypress() 等。一个常见的场景是，点击一个按钮，控制一个元素的显示和隐藏。

<script>
$(document).ready(function() {
    // 点击按钮时，切换内容的可见性
    $("#toggleBtn").click(function() {
        $("#content").slideToggle();
    });
});
</script>

<button id="toggleBtn">显示/隐藏内容</button>
<div id="content" style="display:none; padding:10px; background:#f5f5f5;">
    这是一段可以通过按钮控制显示或隐藏的详细内容。
</div>

这里用到了 slideToggle()，它结合了动画效果和事件，让交互变得平滑。为什么用 slideToggle() 而不是简单地设置 display 属性？因为它能提供渐变的滑动动画，给用户一个清晰的视觉反馈，这比生硬的闪现要友好得多。这是从用户体验角度出发，而不是单纯实现功能。

动态修改样式与属性

DOM 操作是 jQuery 的另一大块内容。通过 css() 方法修改样式，通过 attr() 方法修改或获取属性，这些都非常直接。

addClass()、removeClass() 和 toggleClass() 方法更值得推荐。它们让你可以预先在 CSS 文件中定义好样式规则，然后通过 jQuery 来开关这些规则。这种做法把表现和行为分离开，代码更整洁，也更容易维护。

例如，实现一个“点赞”切换效果：

<style>
    .liked { color: red; font-weight: bold; }
</style>

<script>
$(document).ready(function() {
    $("#likeButton").click(function() {
        $(this).toggleClass("liked");
    });
});
</script>

<button id="likeButton">❤ 点赞</button>

点击按钮，它会在正常状态和红色加粗的“liked”状态之间来回切换。这就是通过 toggleClass 实现的巧妙效果。

jQuery 遍历与 Ajax

当页面结构复杂时，你可能需要在选中一个父元素后，找到它的子元素或相邻元素。.find()、.parent()、.siblings() 等遍历方法就是为此而生。

至于 Ajax，这是 jQuery 在当年真正引爆前端革命的“杀手锏”。$.ajax() 及其快捷方法 $.get()、$.post()，让异步数据交互变得无比简单，不再需要手动创建 XMLHttpRequest 对象和处理各种复杂的状态码。

<script>
$(document).ready(function() {
    $("#loadDataBtn").click(function() {
        $.get("https://api.example.com/data", function(data, status) {
            $("#dataContainer").html("数据加载成功：" + JSON.stringify(data));
        });
    });
});
</script>

<button id="loadDataBtn">从服务器加载数据</button>
<div id="dataContainer"></div>

这只是一个简单的 GET 请求示例。用它可以从后端获取数据并动态更新页面，无需刷新。这在构建单页应用或动态内容块时非常实用。

本文标签：

jQuery介绍