前端笔记：jQuery

一、jQuery 是什么jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作使得用 JavaScript 开发 Web 应用程序变得更加容易。二、如何使用 jQuery下载: 访问 jQuery 官网 下载。CDN 引入: 更方便例如htmlscript srchttps://code.jquery.com/jquery-3.7.1.min.js integritysha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo crossoriginanonymous/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);七、AjaxjQuery 简化了 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]获取到的