jQuery 简介（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发领域，JavaScript 是实现动态交互的核心语言，但直接使用原生 JavaScript 操作 DOM（文档对象模型）时，开发者常常会遇到浏览器兼容性问题、代码冗余以及开发效率低下的困扰。jQuery 简介这一主题旨在为编程初学者和中级开发者提供一个清晰的入门指南，帮助读者理解 jQuery 的核心功能、应用场景以及如何通过它高效地构建交互式网页。

jQuery 是一个轻量级的 JavaScript 库，它通过简洁的语法和封装好的 API，简化了 DOM 操作、事件处理、动画效果等复杂任务，成为前后端开发者的“瑞士军刀”。本文将从基础概念出发，结合实际案例和代码示例，逐步深入讲解 jQuery 的核心特性，并展示如何利用它快速实现网页功能。

什么是 jQuery？

jQuery 是由 John Resig 于 2006 年发起的一个开源项目，其名称来源于“JavaScript Query”的缩写。它最初的设计目标是解决跨浏览器兼容性问题，例如不同浏览器对 DOM 元素的获取方式、事件绑定机制的差异等。通过封装这些差异，jQuery 提供了一套统一的 API，让开发者能够用更少的代码完成复杂的操作。

jQuery 的核心优势

例如，原生 JavaScript 需要多行代码实现的 DOM 操作，使用 jQuery 可以简化为一行：

// 原生 JavaScript  
document.getElementById("button").addEventListener("click", function() {
    document.getElementById("message").innerHTML = "Hello, jQuery!";
});

// jQuery 简化版  
$("#button").click(function() {
    $("#message").html("Hello, jQuery!");
});

jQuery 的基础使用

引入 jQuery 库

在 HTML 文件中，可以通过 CDN 引入 jQuery 库：

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>  

为确保 DOM 完全加载后再执行代码，通常将逻辑包裹在 $(document).ready() 函数中：

$(document).ready(function() {  
    // 所有 jQuery 代码  
});  

或者使用简写形式：

$(function() {  
    // 简化版代码  
});  

基本语法结构

jQuery 的核心语法遵循以下模式：

$(selector).action()  

其中：

• $() 是 jQuery 的核心函数（也称为“美元符号函数”）。
• selector 是用于选择 HTML 元素的 CSS 选择器。
• action() 是对选中的元素执行的操作（如 click()、hide() 等）。

jQuery 的核心功能详解

1. DOM 操作

元素选择与操作

jQuery 的选择器机制是其最强大的功能之一。它支持所有标准 CSS 选择器，并扩展了部分 jQuery 特有的选择器：

// 选择所有 div 元素  
$("div");  

// 选择 id 为 "header" 的元素  
$("#header");  

// 选择 class 为 "active" 的元素  
$(".active");  

// 选择所有 <a> 标签中的第三个元素  
$("a:eq(2)");  

通过选择器，可以轻松操作元素的属性、内容或样式：

// 设置元素内容  
$("#target").text("新文本");  

// 添加或移除类名  
$(".item").addClass("highlight");  
$(".item").removeClass("highlight");  

// 修改样式  
$("#box").css("background-color", "yellow");  

动态创建与删除元素

jQuery 提供了 append()、prepend()、after()、before() 等方法，用于动态修改页面结构：

// 在 div 内部追加新元素  
$("div").append("<p>新段落</p>");  

// 删除所有 class 为 "old" 的元素  
$(".old").remove();  

2. 事件处理

绑定和触发事件

通过 on() 方法可以绑定多种事件（如点击、鼠标悬停等）：

// 绑定点击事件  
$("#button").on("click", function() {  
    alert("按钮被点击了！");  
});  

// 触发事件  
$("#form").trigger("submit");  

常见事件类型

3. 动画与效果

jQuery 内置了多个动画方法，可实现视觉交互：

// 淡入淡出效果  
$("#element").fadeIn(1000);  // 1000 毫秒渐显  
$("#element").fadeOut(1000); // 1000 毫秒渐隐  

// 自定义动画  
$("#box").animate({  
    left: "250px",  
    opacity: 0.5  
}, 1500);  

jQuery 选择器的深度解析

选择器是 jQuery 的灵魂，掌握其用法能显著提升开发效率。以下是几个关键技巧：

组合选择器

通过逗号、空格或逻辑符（如 :not()）组合多个选择器：

// 选择所有 div 和 p 元素  
$("div, p");  

// 选择 id 为 "content" 的 div 下的所有 a 元素  
$("#content a");  

// 选择所有未被选中的复选框  
$("input[type='checkbox']:not(:checked)");  

过滤选择器

使用 :first、:last、:even 等过滤器实现精准定位：

// 选择第一个 div  
$("div:first");  

// 选择所有偶数索引的列表项  
$("li:even");  

层级选择器

通过 parent > child 或 ancestor descendant 定位子元素：

// 选择直接子元素  
$("#sidebar > ul");  

// 选择所有后代元素  
$("#container li");  

实战案例：创建一个可折叠面板

案例需求

实现一个简单的可折叠面板，点击标题展开或收缩内容区域。

HTML 结构

<div class="accordion">  
    <div class="panel">  
        <div class="header">标题 1</div>  
        <div class="content">内容 1...</div>  
    </div>  
    <!-- 其他面板结构相同 -->  
</div>  

CSS 样式

.accordion .content {  
    display: none;  
    transition: height 0.3s ease;  
}  

jQuery 实现

$(function() {  
    $(".accordion .header").click(function() {  
        // 切换当前面板的内容区域  
        $(this).next(".content").slideToggle();  

        // 可选：同时关闭其他展开的面板  
        $(".content").not($(this).next()).slideUp();  
    });  
});  

通过 slideToggle() 方法实现平滑的展开/收缩动画，配合 not() 方法可确保每次只展开一个面板。

jQuery 的插件系统与扩展

jQuery 的强大不仅源于其核心功能，更得益于庞大的插件生态。开发者可以通过以下方式扩展功能：

插件开发示例

创建一个简单的“水波纹”点击效果插件：

(function($) {  
    $.fn.rippleEffect = function() {  
        return this.each(function() {  
            $(this).on("click", function(e) {  
                var $this = $(this),  
                    $circle = $("<span class='ripple'></span>");  

                // 计算点击位置  
                var d = Math.max($this.outerWidth(), $this.outerHeight()),  
                    offset = $this.offset(),  
                    x = e.pageX - offset.left - d / 2,  
                    y = e.pageY - offset.top - d / 2;  

                $circle.css({  
                    width: d,  
                    height: d,  
                    top: y + "px",  
                    left: x + "px"  
                }).appendTo($this).animate({  
                    opacity: 0,  
                    transform: "scale(2)"  
                }, 1000, function() {  
                    $circle.remove();  
                });  
            });  
        });  
    };  
})(jQuery);  

使用时只需调用：

$(".button").rippleEffect();  

常见问题与最佳实践

1. jQuery 与原生 JavaScript 的关系

• 何时选择 jQuery？ 当需要快速开发、兼容旧浏览器或利用现有插件时。
• 何时转向原生 JS？ 现代浏览器支持良好时（如使用 ES6+ 特性），或需要更精细的控制时。

2. 性能优化建议

• 避免频繁操作 DOM：将多个操作合并为一次，例如：

  var $container = $("<div>");  
  $container.append("<p>段落1</p>")  
            .append("<p>段落2</p>");  
  $("body").append($container);  
  

• 缓存选择器结果：

  var $items = $(".item");  
  $items.each(function() { /* ... */ });  
  

3. 兼容性注意事项

• 在旧版浏览器（如 IE8）中需使用兼容版本（如 jQuery 1.x）。
• 使用 $.support 或 Modernizr 检测浏览器特性。

结论

jQuery 简介 一文通过系统化的讲解，展示了其在简化 DOM 操作、事件处理及动画实现方面的核心优势。无论是快速开发原型，还是利用插件生态扩展功能，jQuery 仍是前端工具链中的重要一环。对于编程初学者，它提供了一个低门槛的起点；对于中级开发者，它能显著提升开发效率。

随着现代前端框架（如 React、Vue）的兴起，jQuery 的使用场景有所减少，但它在特定场景（如轻量级项目、快速修复）中仍然不可替代。掌握 jQuery 的底层逻辑，也有助于理解 JavaScript 的设计模式与最佳实践。

通过本文提供的代码示例和案例，读者可以立即开始实践，逐步探索 jQuery 的更多可能性。