前端笔记：jQuery
一、jQuery 是什么？
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作，使得用 JavaScript 开发 Web 应用程序变得更加容易。
二、如何使用 jQuery
- 下载: 访问 jQuery 官网 下载。
- CDN 引入: 更方便，例如：html
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>注意: 必须在引入你自己的 JavaScript 文件之前引入 jQuery。
三、核心概念： $ 符号和选择器
jQuery 使用$符号作为 jQuery 函数的简写别名。
1. 文档就绪函数 (Document Ready)
为了确保 DOM 完全加载后再执行 jQuery 代码，通常将其包裹在文档就绪函数中。
$(document).ready(function() { // 你的 jQuery 代码放在这里 // 或者使用简写形式 }); // 简写形式 $(function() { // 你的 jQuery 代码 });2. 选择器 (Selectors)
jQuery 使用 CSS 选择器语法来查找要操作的 HTML 元素。
| 选择器 | 示例 | 描述 |
|---|---|---|
| 元素选择器 | $("p") | 选取所有<p>元素 |
| ID 选择器 | $("#myId") | 选取 ID 为myId的元素 |
| 类选择器 | $(".myClass") | 选取所有 class 为myClass的元素 |
| 属性选择器 | $("[href]") | 选取所有带有href属性的元素 |
| 通用选择器 | $("*") | 选取所有元素 |
四、DOM 操作
1. 内容操作
.text(): 获取或设置匹配元素的纯文本内容（不包含 HTML 标签）。
// 获取 let textContent = $("#myParagraph").text(); // 设置 $("#myParagraph").text("新的文本内容");.html(): 获取或设置匹配元素的内容（包含 HTML 标签）。
// 获取 let htmlContent = $("#myDiv").html(); // 设置 $("#myDiv").html("<strong>新的 HTML 内容</strong>");.val(): 获取或设置表单元素（如 input, select, textarea）的值。
// 获取 let inputValue = $("#myInput").val(); // 设置 $("#myInput").val("默认值");2. 属性操作
.attr(): 获取或设置元素的 HTML 属性。
// 获取 let hrefValue = $("a").attr("href"); // 设置 $("img").attr("src", "new-image.jpg"); $("a").attr("title", "这是一个链接"); // 设置多个属性 $("a").attr({ title: "新标题", alt: "新说明" });.removeAttr(): 移除元素的属性。
$("img").removeAttr("alt");3. CSS 类操作
.addClass(className): 为元素添加一个或多个 CSS 类。
$("#myElement").addClass("highlight active");.removeClass(className): 移除元素的一个或多个 CSS 类。
$("#myElement").removeClass("highlight");.toggleClass(className): 如果类存在则移除，不存在则添加。
$("#myButton").toggleClass("active");.hasClass(className): 检查元素是否包含指定的 CSS 类，返回布尔值。
if ($("#myElement").hasClass("highlight")) { console.log("元素有 highlight 类"); }五、事件处理
jQuery 提供了丰富的方法来处理各种浏览器事件。
常用事件方法
.click(handler): 处理点击事件。.dblclick(handler): 处理双击事件。.mouseenter(handler): 处理鼠标进入事件。.mouseleave(handler): 处理鼠标离开事件。.hover(handlerIn, handlerOut): 结合mouseenter和mouseleave。.focus(handler): 处理获得焦点事件。.blur(handler): 处理失去焦点事件。.submit(handler): 处理表单提交事件。.on(eventType, handler): 通用事件绑定方法，推荐使用。
$(document).ready(function() { // 点击按钮改变段落颜色 $("#changeColorBtn").click(function() { $("#myParagraph").css("color", "red"); }); // 鼠标悬停效果 $(".my-item").hover( function() { // mouseenter $(this).addClass("hovered"); }, function() { // mouseleave $(this).removeClass("hovered"); } ); // 使用 .on() 绑定事件 (更灵活，也适用于动态添加的元素) $(document).on('click', '#dynamicButton', function() { alert('动态按钮被点击了！'); }); });六、链式操作 (Chaining)
jQuery 的一个重要特性是链式操作。因为大多数 jQuery 方法都会返回 jQuery 对象本身，所以你可以将多个方法连接起来，一行代码完成多项任务。
$("#myDiv") .css("color", "blue") .addClass("highlight") .fadeIn(1000);七、Ajax
jQuery 简化了 Ajax 请求的发送过程。
$.ajax()
最灵活的方法，可以配置所有 Ajax 选项。
$.ajax({ url: '/api/data', // 请求地址 type: 'GET', // 请求类型 dataType: 'json', // 期望服务器返回的数据类型 success: function(data) { // 请求成功时的回调 console.log(data); // 处理返回的数据 }, error: function(xhr, status, error) { // 请求失败时的回调 console.error("Ajax Error:", error); } });$.get()和$.post()
对于简单的 GET 和 POST 请求，可以使用这两个便捷方法。
// GET 请求 $.get('/api/user/123', function(data) { $('#result').html(data.name); }).fail(function() { console.error('Get request failed.'); }); // POST 请求 $.post('/api/user', { name: 'John', age: 30 }, function(data) { console.log('User created:', data); }).fail(function() { console.error('Post request failed.'); });如何判断一个对象是原生 DOM 元素还是 jQuery 对象？
方法 1：使用instanceof(推荐)
这是最标准和可靠的方法。
let element = document.querySelector('a'); let $element = $('a'); // 判断是否为 jQuery 对象 console.log(element instanceof jQuery); // false console.log($element instanceof jQuery); // true // 判断是否为原生 DOM 元素 console.log(element instanceof HTMLElement); // true console.log($element instanceof HTMLElement); // false方法 2：检查jquery属性
jQuery 对象内部有一个特殊的jquery属性，包含了 jQuery 版本号。原生 DOM 元素没有这个属性。
let element = document.querySelector('a'); let $element = $('a'); // 判断是否为 jQuery 对象 console.log(element.jquery); // undefined console.log($element.jquery); // "3.6.0" 或其他版本号 (取决于你使用的 jQuery 版本) if ($element.jquery) { console.log("这是一个 jQuery 对象"); } else { console.log("这不是 jQuery 对象"); }jQuery中prop()和attr()的区别如下：
图中使用$('a')[1]获取到的