引言

jQuery 作为轻量级 JavaScript 库，核心价值在于 简化 DOM 操作、跨浏览器兼容性和高效开发。尽管现代框架崛起，jQuery 仍在遗留系统维护、快速原型开发中广泛应用。本文涵盖 jQuery 3.6+ 核心语法，重点解析高效用法与最佳实践。

一、jQuery 基础语法

1. 选择器语法

// 基础选择器  
$("#header")                // ID 选择器  
$(".btn-primary")           // Class 选择器  
$("div")                    // 标签选择器  // 层级选择器  
$("ul > li")                // 直接子元素  
$("section p")              // 后代元素  // 属性选择器  
$("input[type='text']")     // 精确匹配属性  
$("a[href^='https']")       // 以 https 开头  // 伪类选择器  
$("tr:even")                // 偶数行  
$("li:first-child")         // 第一个子元素  
$("div:hidden")             // 隐藏元素

✅ 最佳实践：优先使用 data-* 属性选择器（如 $("[data-toggle='modal']")）增强可维护性。

二、DOM 操作语法

1. 内容操作

// 读写内容  
$("#box").html("<b>新内容</b>");  // 设置 HTML  
$("#box").text();                // 获取纯文本  
$("input").val("2025");         // 设置表单值  // 元素增删改  
$("#list").append("<li>Item</li>"); // 末尾添加  
$("#header").prepend("↑");        // 开头添加  
$(".old").remove();               // 删除元素

2. 属性与样式

// 属性操作  
$("#logo").attr("src", "new.png");  // 修改属性  
$("#checkbox").prop("checked", true); // 布尔属性  // 类操作  
$("#menu").addClass("active");  
$("#menu").toggleClass("expanded"); // 切换类  // 样式操作  
$("#box").css("color", "red");  
$("#box").css({                   // 批量设置  "background": "#333",  "padding": "10px"  
});

三、事件处理语法

1. 事件绑定与委托

// 标准绑定  
$("#btn").on("click", function() {  alert("Clicked!");  
});  // 事件委托（动态元素适用）  
$("#table").on("click", ".delete-btn", function() {  $(this).closest("tr").remove();  
});  // 快捷方法  
$("#form").submit(function(e) {  e.preventDefault(); // 阻止默认提交  
});

2. 事件解绑

$("#btn").off("click");  // 移除所有 click 事件  
$("#table").off("click", ".delete-btn"); // 移除委托事件

四、动画与效果

1. 基础动画

$("#box").hide(400);           // 400ms 隐藏  
$("#box").show("slow");        // 慢速显示  
$("#box").toggle(200);         // 切换显示状态

2. 高级动画

// 滑动效果  
$("#panel").slideUp();  
$("#panel").slideToggle();  // 淡入淡出  
$("#img").fadeIn(1000);  
$("#img").fadeTo(500, 0.5);   // 渐变到半透明  // 自定义动画  
$("#ball").animate({  left: "+=200px",  opacity: 0.5  
}, 1000);

五、AJAX 请求语法

// $.ajax() 基础用法  
$.ajax({  url: "/api/data",  type: "GET",  dataType: "json",  success: function(data) {  console.log("成功:", data);  },  error: function(xhr) {  console.error("失败:", xhr.status);  }  
});  // 快捷方法  
$.get("/api/user", { id: 101 }, function(user) {  console.log(user.name);  
});  $.post("/api/save", JSON.stringify(data), function(res) {  alert("保存成功！");  
});

⚠️ 注意：jQuery 3.0+ 默认返回 Promise，可使用 .done()、.fail() 替代 success/error 回调。

六、链式调用优化

// 典型链式调用  
$("#list")  .find("li")  .addClass("item")  .css("color", "blue")  .end()          // 回退到 #list  .append("<li>End</li>");  // 链式中断技巧  
const $items = $("#list li");  
$items.eq(0).hide();  // 中断链式但不破坏选择集

七、插件开发规范

1. 基础插件结构

(function($) {  $.fn.highlight = function(options) {  // 合并默认参数  const settings = $.extend({  color: "#ff0",  backgroundColor: "#000"  }, options);  // 主逻辑  return this.css({  color: settings.color,  backgroundColor: settings.backgroundColor  });  };  
})(jQuery);  // 调用  
$("p").highlight({ color: "red" });

八、jQuery vs 现代框架

维度	jQuery	React/Vue
DOM 操作	直接操作 DOM	虚拟 DOM 差分更新
数据绑定	手动同步数据与视图	响应式数据绑定
组件化	依赖插件体系	原生组件支持
适用场景	传统多页应用、渐进增强	复杂单页应用（SPA）

🔮 趋势建议：新项目优先选用 Vue/React，旧项目维护可结合 jQuery 与现代工具（如 Webpack 打包）。

附录：实用资源

官方文档：jQuery API
代码片段：

// 防抖搜索  
$("#search").on("input", $.debounce(300, function() {  fetchResults($(this).val());  
}));  // 检测元素可见性  
if ($("#banner").is(":visible")) {  startAnimation();  
}