jQuery学习笔记

一、jQuery简介

jQuery 是一个轻量级的 JavaScript 库，核心思想是 "write less, do more"（写得更少，做得更多）。它封装了复杂的 JavaScript 操作（如 DOM 操作、事件处理、动画效果等），让开发者用更简洁的代码实现功能，同时解决了不同浏览器之间的兼容性问题。

二、为什么学习jQuery

1.简化代码：jQuery 将许多原本需要多行原生JS代码才能完成的常见任务进行了封装，只需一行代码就能调用这些方法。

2.丰富的 API：提供了大量现成的方法，比如 DOM 操作、动画、AJAX 调用等常见需求，简化了许多复杂的操作。

3.轻量高效：压缩版体积很小，减小网络数据传输。

4. ......

三、如何使用 jQuery

1. 引入 jQuery

使用 jQuery 前需要先引入它，有两种方式：

通过 CDN 引入（推荐，无需下载文件）

html 复制代码

<!-- 引入 jQuery 3.7.1 版本（兼容大部分浏览器） -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

下载本地文件引入：

从 jQuery 官网下载压缩版（jquery.min.js），放在项目中，再引入：

html 复制代码

<script src="js/jquery.min.js"></script>

2. 文档就绪事件(The document Ready Event)

文档就绪事件 的核心是解决 "DOM 未加载完成时，jQuery 代码无法正确执行" 的问题，即确保代码**在 DOM 就绪后执行，**避免操作未加载的元素。

它可以防止 jQuery 代码在文档加载完成前就执行，比如页面还没渲染出按钮，就执行 "给按钮绑定点击事件" 的代码，会因找不到按钮而报错。

最好是等文档完全加载并就绪后，再执行操作。这样可以把 JavaScript 代码放在文档的<head>里（而不是必须等在<body>末尾）。传统写法是将JS 代码放<body>末尾，确保 DOM 加载完。使用文档就绪事件后JS 代码可放<head>，由事件确保 DOM 加载完再执行。

触发时机：DOM 树（HTML 结构）构建完成后执行，但图片、CSS 等资源可能还没加载完。

与load事件区别：load要等所有资源（图片、CSS 等）加载完才触发，文档就绪事件更早执行（只需 DOM 就绪）。

四、核心语法 (jQuery Syntax)

jQuery 的核心语法可以概括为： $(selector).action()，即$ (选择器).操作()

javascript 复制代码

// 完整写法
$(document).ready(function() {
  // 这里写 jQuery 代码
  console.log("文档加载完成！");
});

// 简写
$(function() {
  // 这里写 jQuery 代码
  console.log("文档加载完成！");
});

1.$：表示 jQuery 库（也可用 jQuery 代替，如 jQuery(selector).action()）。

2.selector：选择器，用于查找 HTML 元素（类似 CSS 选择器）。

3.action()：对选中的元素执行操作（如隐藏、修改内容等）。

五、选择器（Selector）

选择器是 jQuery 的核心，用于 "查找" HTML 元素。常见类型如下：

1. 基础选择器

选择器	语法示例	说明
元素选择器	`$("p")`	选择所有 `<p>` 元素
ID 选择器	`$("#username")`	选择 `id="username"` 的元素
类选择器	`$(".active")`	选择 `class="active"` 的元素
通配符选择器	`$("*")`	选择所有元素
多元素选择器	`$("h1, p, .box")`	选择所有 `<h1>`、`<p>` 和 `class="box"` 的元素

2. 层级选择器

选择器	语法示例	说明
后代选择器	`$("div p")`	选择 `<div>` 内所有后代 `<p>`
子元素选择器	`$("div > p")`	选择 `<div>` 内直接子元素 `<p>`
相邻兄弟选择器	`$("div + p")`	选择 `<div>` 后面紧邻的第一个 `<p>`

3. 过滤选择器（特殊选择器）

选择器	语法示例	说明
`:first`	`$("p:first")`	选择第一个 `<p>` 元素
`:last`	`$("p:last")`	选择最后一个 `<p>` 元素
`:even`	`$("tr:even")`	选择索引为偶数的 `<tr>`（从 0 开始）
`:odd`	`$("tr:odd")`	选择索引为奇数的 `<tr>`
`:checked`	`$("input:checked")`	选择所有被选中的复选框 / 单选框
`:disabled`	`$("input:disabled")`	选择所有禁用的输入框

示例：

html 复制代码

<p>段落1</p>
<p id="para2">段落2</p>
<p class="highlight">段落3</p>

<script>
$(function() {
  $("p").css("color", "blue"); // 所有 p 元素文字变蓝
  $("#para2").css("font-size", "20px"); // id=para2 的 p 元素字体变大
  $(".highlight").css("background", "yellow"); // class=highlight 的 p 元素加黄背景
});
</script>

六、事件处理

事件是用户与页面的交互（如点击、鼠标悬停等），jQuery 提供了简洁的事件绑定方法。

常用事件方法

事件方法	说明	示例
`click()`	点击事件	`$("button").click(function(){...})`
`hover()`	鼠标悬停 / 离开事件（结合两个函数）	`$("div").hover(enterFn, leaveFn)`
`on()`	绑定多个事件（推荐，支持动态元素）	`$("div").on({click: fn, mouseenter: fn})`

示例1 ：点击事件

html 复制代码

<button id="btn">点击我</button>
<p id="text"></p>

<script>
$(function() {
  $("#btn").click(function() {
    // 点击按钮后，修改 p 元素内容
    $("#text").text("按钮被点击了！");
  });
});
</script>

示例2 ：鼠标悬停事件

html 复制代码

<div style="width: 100px; height: 100px; background: red;"></div>

<script>
$(function() {
  $("div").hover(
    // 鼠标进入时执行
    function() {
      $(this).css("background", "green");
    },
    // 鼠标离开时执行
    function() {
      $(this).css("background", "red");
    }
  );
});
</script>

示例 3：绑定多个事件（on() 方法）

html 复制代码

<div style="width: 100px; height: 100px; background: blue;"></div>

<script>
$(function() {
  $("div").on({
    click: function() {
      $(this).css("border", "5px solid black");
    },
    mouseenter: function() {
      $(this).css("opacity", 0.5);
    },
    mouseleave: function() {
      $(this).css("opacity", 1);
    }
  });
});
</script>

七、动画与效果

jQuery 提供了丰富的动画效果，无需手动写 CSS 过渡或定时器。

1. 基础效果

方法	说明	示例
`hide()`	隐藏元素	`$("p").hide(1000)`（1 秒内隐藏）
`show()`	显示元素	`$("p").show(1000)`（1 秒内显示）
`toggle()`	切换显示 / 隐藏状态	`$("p").toggle(1000)`
`fadeIn()`	淡入显示	`$("div").fadeIn(2000)`（2 秒淡入）
`fadeOut()`	淡出隐藏	`$("div").fadeOut(2000)`（2 秒淡出）
`slideDown()`	向下滑动显示	`$("ul").slideDown(500)`
`slideUp()`	向上滑动隐藏	`$("ul").slideUp(500)`

示例：淡入淡出效果

html 复制代码

<button id="fadeInBtn">淡入</button>
<button id="fadeOutBtn">淡出</button>
<div style="width: 100px; height: 100px; background: pink; display: none;"></div>

<script>
$(function() {
  $("#fadeInBtn").click(function() {
    $("div").fadeIn(1000); // 1秒内淡入显示
  });
  $("#fadeOutBtn").click(function() {
    $("div").fadeOut(1000); // 1秒内淡出隐藏
  });
});
</script>

八、DOM操作

jQuery 简化了 DOM 元素的创建、修改、删除等操作。

1. 内容操作

方法	说明	示例
`text()`	获取 / 设置元素文本（不含 HTML）	`$("p").text("新文本")`
`html()`	获取 / 设置元素内容（含 HTML）	`$("div").html("<strong>加粗</strong>")`
`val()`	获取 / 设置表单元素值	`$("input").val("用户名")`

示例：

html 复制代码

<p id="para">原始文本</p>
<input type="text" id="username">
<button id="btn">修改</button>

<script>
$(function() {
  $("#btn").click(function() {
    // 修改 p 元素文本
    $("#para").html("<em>新的文本</em>");
    // 设置输入框值
    $("#username").val("张三");
    // 获取输入框值并打印
    console.log($("#username").val()); // 输出：张三
  });
});
</script>

2. 属性操作

方法	说明	示例
`prop()`	获取 / 设置元素属性（如 `checked`、`disabled`）	`$("input").prop("checked", true)`
`attr()`	获取 / 设置普通属性（如 `src`、`href`）	`$("img").attr("src", "pic.jpg")`

示例：

html 复制代码

<input type="checkbox" id="agree"> 同意
<button id="checkBtn">勾选</button>
<button id="disableBtn">禁用</button>

<script>
$(function() {
  $("#checkBtn").click(function() {
    // 勾选复选框
    $("#agree").prop("checked", true);
  });
  $("#disableBtn").click(function() {
    // 禁用复选框
    $("#agree").prop("disabled", true);
  });
});
</script>

3. 添加 / 删除元素

方法	说明	示例
`append()`	在元素内部末尾添加内容	`$("ul").append("<li>新项</li>")`
`prepend()`	在元素内部开头添加内容	`$("ul").prepend("<li>第一项</li>")`
`remove()`	删除元素（包括自身）	`$("p").remove()`
`empty()`	清空元素内容（保留自身）	`$("div").empty()`

示例：

html 复制代码

<ul>
  <li>原有项</li>
</ul>
<button id="addBtn">添加项</button>
<button id="delBtn">删除第一项</button>

<script>
$(function() {
  $("#addBtn").click(function() {
    $("ul").append("<li>新添加的项</li>");
  });
  $("#delBtn").click(function() {
    $("ul li:first").remove(); // 删除第一个 li
  });
});
</script>

九、链式编程

jQuery 支持链式编程：在一个元素上连续调用多个方法，避免重复选择元素，代码更简洁。

示例：

html 复制代码

<p>链式编程示例</p>

<script>
$(function() {
  $("p")
    .css("color", "red")       // 改颜色
    .slideUp(1000)             // 向上滑动隐藏
    .slideDown(1000)           // 向下滑动显示
    .text("链式操作完成！");   // 修改文本
});
</script>

jQuery 是前端开发的重要工具，通过简化 DOM 操作、事件处理和动画效果，让开发更高效。作为初学者，建议先掌握核心语法（选择器 + 方法），再通过实际案例练习（如表单验证、动态列表、交互组件）加深理解。后续可以学习 jQuery 的 AJAX 功能（用于后端数据交互）和插件扩展，进一步拓展应用场景。

希望我的文章对你有所帮助，感谢观看！(^ 3^)