jQuery 核心知识点总结

最新推荐文章于 2025-12-06 22:07:37 发布

原创最新推荐文章于 2025-12-06 22:07:37 发布 · 813 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

jQuery 是曾经前端开发的 “瑞士军刀”，以简洁的语法和强大的 DOM 操作能力风靡多年。即使在框架盛行的今天，掌握 jQuery 仍能帮你快速处理 DOM 交互、简化 AJAX 操作。以下是核心知识点梳理：

一、jQuery 是什么？

本质：一个封装了原生 JavaScript 的库（.js 文件），核心目标是写更少的代码，做更多的事。
优势：
- 解决浏览器兼容性问题（无需手动处理不同浏览器的 API 差异）。
- 简化 DOM 操作、事件处理、动画效果、AJAX 请求等。
- 链式调用语法，代码更简洁。

二、核心语法：`$()` 函数

jQuery 的核心是全局函数 $()（别名 jQuery()），所有操作都通过它开始。

1. 选择器：获取 DOM 元素

$() 接收选择器字符串，返回一个包含匹配元素的 “jQuery 对象”（类似数组，可直接调用 jQuery 方法）。

// 1. ID 选择器（#）
$("#box"); // 获取 id="box" 的元素

// 2. 类选择器（.）
$(".item"); // 获取所有 class="item" 的元素

// 3. 标签选择器
$("div"); // 获取所有 <div> 元素

// 4. 组合选择器（同 CSS 语法）
$("ul li.active"); // 获取 <ul> 下 class="active" 的 <li>

2. 转换：原生 DOM 与 jQuery 对象

原生 DOM 对象 → jQuery 对象：用 $(原生对象) 包裹。

const div = document.getElementById("box"); // 原生 DOM 对象
const $div = $(div); // 转为 jQuery 对象（可调用 jQuery 方法）

jQuery 对象 → 原生 DOM 对象：通过索引或 .get(索引) 获取。

const $lis = $("li");
const firstLi = $lis[0]; // 原生 DOM 对象
const secondLi = $lis.get(1); // 原生 DOM 对象

三、DOM 操作：增删改查

1. 查：获取元素信息

// 获取内容（文本/HTML）
$("p").text(); // 获取第一个 <p> 的文本内容
$("p").html(); // 获取第一个 <p> 的 HTML 内容

// 获取属性
$("img").attr("src"); // 获取图片的 src 属性
$("input").val(); // 获取输入框的值（表单专用）

// 获取样式
$("div").css("width"); // 获取 div 的宽度

2. 改：修改元素信息

// 修改内容
$("p").text("新文本"); // 所有 <p> 文本改为“新文本”
$("p").html("<span>新HTML</span>"); // 所有 <p> 替换为 span 标签

// 修改属性
$("img").attr("src", "new.jpg"); // 图片 src 改为 new.jpg
$("input").val("默认值"); // 输入框设为“默认值”

// 修改样式
$("div").css("color", "red"); // 文字设为红色
$("div").css({ // 批量设置样式（对象形式）
  "font-size": "16px",
  "background": "#fff"
});

3. 增：添加新元素

// 内部添加（子元素）
$("ul").append("<li>新项</li>"); // 追加到 ul 内部末尾
$("ul").prepend("<li>第一项</li>"); // 插入到 ul 内部开头

// 外部添加（兄弟元素）
$("div").after("<p>后面</p>"); // 插入到 div 后面
$("div").before("<p>前面</p>"); // 插入到 div 前面

4. 删：移除元素

$("p").remove(); // 移除所有 <p>（包括自身及子元素）
$("p").empty(); // 清空 <p> 的所有子元素（保留自身）

四、事件处理

jQuery 统一了事件绑定方式，无需考虑浏览器差异。

1. 常用事件

// 点击事件
$("button").click(function() {
  alert("点击了按钮");
});

// 鼠标移入/移出
$("div").mouseenter(function() {
  $(this).css("background", "yellow"); // $(this) 指当前触发事件的元素
});
$("div").mouseleave(function() {
  $(this).css("background", "white");
});

// 输入框变化
$("input").change(function() {
  console.log("值变了：" + $(this).val());
});

2. 事件委托（动态元素适用）

当元素是动态添加的（初始不存在于 DOM 中），直接绑定事件无效，需用事件委托：

// 给父元素 ul 委托事件，监听子元素 li 的点击
$("ul").on("click", "li", function() {
  $(this).css("color", "red"); // 动态添加的 li 也能触发
});

原理：事件冒泡到父元素，由父元素判断目标元素是否匹配选择器（li）。

五、动画效果

jQuery 内置了常用动画，无需手动写 CSS 过渡。

// 显示/隐藏
$("div").show(1000); // 1秒内显示（参数为毫秒）
$("div").hide(1000); // 1秒内隐藏

// 淡入/淡出
$("div").fadeIn(); // 淡入
$("div").fadeOut(); // 淡出

// 滑动（类似折叠面板）
$("div").slideDown(); // 向下展开
$("div").slideUp(); // 向上收起

// 自定义动画（属性+时长）
$("div").animate({
  left: "200px",
  width: "300px"
}, 2000); // 2秒内完成动画

六、AJAX 请求

jQuery 简化了原生 XMLHttpRequest，用 $.ajax() 统一处理异步请求。

1. 基本用法

$.ajax({
  url: "https://api.example.com/data", // 请求地址
  type: "GET", // 请求方法（GET/POST）
  dataType: "json", // 预期返回数据类型（json/text/html）
  success: function(data) { // 请求成功的回调
    console.log("数据：", data);
  },
  error: function(xhr) { // 请求失败的回调
    console.log("错误：", xhr.status);
  }
});

2. 简化写法

// GET 请求（常用）
$.get("url", function(data) {
  console.log(data);
});

// POST 请求
$.post("url", { name: "张三" }, function(data) { // 第二个参数是发送的数据
  console.log(data);
});

七、链式调用

jQuery 方法执行后会返回自身（jQuery 对象），因此可以链式调用多个方法：

// 一行代码完成：选中 → 修改文本 → 加样式 → 绑定事件
$("div")
  .text("新内容")
  .css("color", "blue")
  .click(function() {
    alert("链式调用");
  });

八、常见问题

为什么要加 $(document).ready()？确保 DOM 加载完成后再执行代码，避免找不到元素：

$(document).ready(function() {
  // 在这里写 jQuery 代码
});
// 简写形式
$(function() {
  // 代码
});

jQuery 与其他库的冲突？如果其他库也用了 $ 符号，可释放 $ 使用权：
```
jQuery.noConflict(); // 之后只能用 jQuery() 代替 $()
```

总结

jQuery 以 “简洁” 为核心，适合快速开发中小型项目、处理 DOM 交互和 AJAX 请求。虽然现在 React、Vue 等框架更流行，但许多老项目仍依赖 jQuery，掌握它能帮你快速接手维护工作。核心是理解 $() 选择器、链式调用和事件处理，其余功能可按需查阅 jQuery 官方文档。