深入理解 jQuery：从入门到实战的全面指南

最新推荐文章于 2025-05-16 14:49:58 发布

Python智慧行囊

最新推荐文章于 2025-05-16 14:49:58 发布

阅读量650

点赞数 25

文章标签： python jquery ajax

本文链接：https://blog.csdn.net/2201_75786273/article/details/147982320

版权

一、jQuery 概述：重新定义前端开发效率

一、jQuery 概述：重新定义前端开发效率

在前端开发的历史长河中，2006 年无疑是具有里程碑意义的一年。jQuery 的诞生彻底改变了开发者操作 DOM 的方式，其核心理念 "Write Less, Do More" 至今仍影响着整个前端生态。这个由 John Resig 创造的轻量级 JavaScript 框架，通过封装原生 JS 的复杂操作，将开发者从繁琐的 DOM 操作、事件处理和浏览器兼容问题中解放出来。如今，尽管前端框架层出不穷，jQuery 依然在中小型项目和快速开发场景中占据重要地位。

框架特性解析

轻量级设计：压缩后体积仅 30KB 左右，加载速度极快
链式调用语法：支持连续操作，代码可读性显著提升

$("#div1").css("color", "red").slideUp("slow").hide();

强大的选择器：兼容 CSS3 选择器并扩展了伪类选择器
完善的事件处理：统一的事件绑定机制，支持事件委托
丰富的动画效果：内置滑动、淡入淡出等多种动画函数
简化的 Ajax 操作：提供 $.ajax () 等一站式解决方案

二、基础入门：从环境搭建到核心机制

（一）快速上手三步曲

资源引入

<!-- 生产环境推荐使用CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 本地开发环境 -->
<script src="js/jquery-3.6.0.js"></script>

文档就绪事件

// 推荐写法：简洁高效
$(function() {
  // 所有jQuery代码建议在此区域编写
});

// 完整写法：等价于上面的简写
$(document).ready(function() {
  // 文档解析完成后的执行代码
});

注意事项：

确保 jQuery 文件在自定义 JS 文件之前引入
避免在文档未就绪时操作 DOM 元素，可能导致程序报错

（二）第一个 jQuery 程序

<body>
  <div id="content">Hello jQuery!</div>
  <button id="btn">点击改变颜色</button>

  <script>
    $(function() {
      $("#btn").click(function() {
        $("#content")
          .css("color", "red")
          .slideToggle("fast")
          .text("欢迎进入jQuery世界！");
      });
    });
  </script>
</body>

三、核心技术：选择器与 DOM 操作实战

（一）选择器大全

1. 基本选择器

选择器	示例	说明
ID 选择器	$("#div1")	根据元素 ID 精确匹配
类选择器	$(".divclass")	匹配所有指定类名的元素
标签选择器	$("div")	匹配所有指定标签元素
并集选择器	$("#div1, .divclass")	同时匹配多个选择器

2. 层次选择器

$("#parent > child") // 子元素选择器
$("#prev + .next")   // 紧邻兄弟选择器
$("#prev ~ .sibling") // 普通兄弟选择器

3. 过滤选择器（重点）

$("div:first")        // 首个元素
$("div:not(#div2)")   // 排除指定元素
$("div:even")         // 偶数索引元素（从0开始）
$("div:gt(2)")        // 索引大于2的元素
$("div:contains('文本')") // 包含指定文本的元素

4. 属性选择器

$("div[id]")           // 存在id属性的元素
$("input[name='username']") // 精确匹配name属性
$("a[href*='http']")   // 包含指定字符串的属性值

（二）DOM 操作实战

1. 内容操作

// 获取/设置文本内容（不含HTML）
$("#div").text(); // 获取文本
$("#div").text("新文本"); // 设置文本

// 获取/设置HTML内容（含标签）
$("#div").html(); 
$("#div").html("<b>加粗内容</b>"); 

// 表单值操作
$("#input").val("默认值"); // 设置输入框值

2. 属性操作

// 获取/设置属性
$("#img").attr("src", "new.jpg"); 
$("#checkbox").prop("checked", true); // 操作表单属性

// 删除属性
$("#div").removeAttr("class");

3. 样式操作

// 单次设置样式
$("#div").css("background-color", "red"); 

// 批量设置样式
$("#div").css({
  "font-size": "18px",
  "font-weight": "bold"
});

// 切换类样式
$("#div").toggleClass("active");

四、事件处理与动画效果

（一）事件绑定机制

// 基础事件绑定
$("#btn").click(function() {
  // 点击事件处理逻辑
});

// 事件委托（适合动态元素）
$("body").on("click", ".dynamic-btn", function() {
  // 处理动态生成的按钮点击事件
});

// 事件解绑
$("#btn").off("click");

（二）常用事件类型

事件类型	说明
click	鼠标点击事件
mouseover	鼠标移入事件
change	表单元素值改变事件
keypress	键盘按键按下事件
submit	表单提交事件

（三）动画效果演示

// 滑动动画
$("#div").slideDown("slow"); // 下滑显示
$("#div").slideUp("fast");   // 上滑隐藏
$("#div").slideToggle();     // 切换显示状态

// 淡入淡出动画
$("#div").fadeIn("normal");  // 淡入显示
$("#div").fadeOut(1000);     // 1秒淡出隐藏
$("#div").fadeToggle();      // 切换淡入淡出

// 自定义动画
$("#div").animate({
  width: "300px",
  height: "200px",
  opacity: 0.5
}, 1000); // 1秒内完成动画

五、Ajax 实战：前后端数据交互

（一）基础 Ajax 请求

$.ajax({
  url: "/api/data",        // 请求地址
  type: "GET",             // 请求方法（GET/POST）
  data: { id: 123 },       // 发送的数据
  dataType: "json",        // 预期响应类型
  success: function(res) { // 成功回调函数
    console.log("请求成功:", res);
  },
  error: function(err) {   // 错误处理函数
    console.error("请求失败:", err);
  }
});

（二）简化写法

// GET请求
$.get("/api/data", { id: 123 }, function(res) {
  // 处理响应数据
});

// POST请求
$.post("/api/submit", { name: "John" }, function(res) {
  // 处理提交结果
});

六、最佳实践与性能优化

（一）编码规范建议

统一使用$作为 jQuery 别名（避免与其他库冲突）
链式操作保持单行缩进，提高可读性
合理使用事件委托，减少内存占用
动画操作避免频繁触发重绘（使用requestAnimationFrame优化）

（二）性能优化要点

缓存 DOM 对象

const $list = $("#list"); // 缓存列表元素
$list.find("li").click(function() { ... });

批量操作 DOM

// 错误做法：多次操作触发回流
$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "red");

// 正确做法：一次性设置样式
$("div").css({
  width: "100px",
  height: "100px",
  background: "red"
});

使用事件委托处理动态元素

<ul id="list">
  <!-- 动态添加的li元素 -->
</ul>

<script>
  // 事件委托绑定点击事件
  $("#list").on("click", "li", function() {
    console.log("点击了动态列表项");
  });
</script>