jquery详解

jQuery 简介

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。其核心目标是让开发者以更少的代码完成更多功能。

jQuery 核心特性

链式调用
jQuery 方法通常返回 jQuery 对象，支持链式调用。例如：

$("p").css("color", "red").slideUp(2000).slideDown(2000);

DOM 操作
提供简洁的 API 操作 DOM 元素：

$("#myDiv").html("<p>New content</p>");
$(".myClass").addClass("highlight");

事件处理
统一事件绑定方式，跨浏览器兼容：

$("#btn").click(function() {
  alert("Button clicked!");
});

Ajax 支持
简化异步请求：

$.get("test.php", function(data) {
  $("#result").html(data);
});

常用方法分类

选择器

• 基本选择器：$("#id"), $(".class"), $("tag")
• 层级选择器：$("parent > child"), $("ancestor descendant")
• 过滤选择器：:first, :last, :even, :odd

DOM 操作

• 内容操作：.html(), .text(), .val()
• 属性操作：.attr(), .removeAttr(), .prop()
• CSS 操作：.css(), .addClass(), .toggleClass()

事件方法

• .on(): 通用事件绑定
• .click(), .hover(): 快捷方法
• .trigger(): 手动触发事件

效果与动画

• 显示/隐藏：.show(), .hide(), .toggle()
• 淡入淡出：.fadeIn(), .fadeOut()
• 自定义动画：.animate()

插件扩展机制

jQuery 允许通过 .fn 扩展自定义方法：

$.fn.highlight = function(color) {
  this.css("background-color", color || "yellow");
  return this; // 保持链式调用
};
// 使用
$("p").highlight().fadeOut();

性能优化建议

• 缓存选择器结果：避免重复查询 DOM

  var $elements = $(".myClass");

• 使用事件委托：减少事件绑定数量

  $("#parent").on("click", ".child", handler);

• 合并 DOM 操作：减少回流重绘

  var $div = $("#myDiv");
  $div.css("color", "red").width(100);

现代替代方案

随着现代浏览器 API 完善和框架（如 React/Vue）兴起，jQuery 使用率下降，但在遗留项目维护和快速原型开发中仍有价值。