HoRain云--jQuery 语法
🎬 HoRain 云小助手：个人主页
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
目录
⛳️ 推荐
jQuery 语法详解
一、jQuery 基础语法
1. 核心思想：选择器 + 方法
2. 入口函数：DOM 加载完成后执行
二、选择器语法
1. 基础选择器
2. 层级选择器
3. 属性选择器
4. 伪类选择器
三、DOM 操作语法
1. 内容操作
2. 属性与样式
四、事件处理语法
1. 事件绑定与委托
五、jQuery 对象与 DOM 对象的转换
1. jQuery 对象转 DOM 对象
2. DOM 对象转 jQuery 对象
六、DOM 遍历
七、效果与动画
1. 显示和隐藏
2. 淡入淡出
3. 滑动
4. 自定义动画
八、最佳实践
九、获取 jQuery 文档
jQuery 语法详解
jQuery 是一个快速、简洁的 JavaScript 库，核心价值在于简化 DOM 操作、跨浏览器兼容性和高效开发。下面详细介绍 jQuery 的核心语法。
一、jQuery 基础语法
1. 核心思想：选择器 + 方法
jQuery 的核心语法可以概括为：$(选择器).方法()。
$：jQuery 的全局别名，等价于jQuery，用于获取 DOM 元素并返回一个 jQuery 对象。- 选择器：和 CSS 选择器语法一致，用于精准定位需要操作的 DOM 元素。
- 方法：jQuery 封装的功能方法，用于对选中的 DOM 元素执行操作。
示例：
// 修改ID为title的元素内容和样式 $("#title").text("jQuery核心语法").css({ color: "red", fontSize: "24px" });2. 入口函数：DOM 加载完成后执行
jQuery 提供了简洁的入口函数，确保代码在 DOM 加载完成后执行。
两种常用写法：
// 推荐写法，简洁直观 $(function() { console.log("DOM加载完成，可执行jQuery代码"); $("#title").text("入口函数示例"); }); // 完整写法，等价于写法1 $(document).ready(function() { // 代码逻辑 });二、选择器语法
1. 基础选择器
$("#header") // ID 选择器 $(".btn-primary") // Class 选择器 $("div") // 标签选择器2. 层级选择器
$("ul > li") // 直接子元素 $("section p") // 后代元素3. 属性选择器
$("input[type='text']") // 精确匹配属性 $("a[href^='https']") // 以 https 开头4. 伪类选择器
$("tr:even") // 偶数行 $("li:first-child") // 第一个子元素 $("div:hidden") // 隐藏元素最佳实践：优先使用data-*属性选择器（如$("[data-toggle='modal']")）增强可维护性。
三、DOM 操作语法
1. 内容操作
$("#box").html("<b>新内容</b>"); // 设置 HTML $("#box").text(); // 获取纯文本 $("input").val("2025"); // 设置表单值 $("#list").append("<li>Item</li>"); // 末尾添加 $("#header").prepend("↑"); // 开头添加 $(".old").remove(); // 删除元素2. 属性与样式
$("#logo").attr("src", "new.png"); // 修改属性 $("#checkbox").prop("checked", true); // 布尔属性 $("#menu").addClass("active"); // 添加类 $("#menu").toggleClass("expanded"); // 切换类 $("#box").css("color", "red"); // 单个样式 $("#box").css({ // 批量设置 "background": "#333", "padding": "10px" });四、事件处理语法
1. 事件绑定与委托
// 标准绑定 $("#btn").on("click", function() { alert("Clicked!"); }); // 事件委托（动态元素适用） $("#table").on("click", ".delete-btn", function() { $(this).closest("tr").remove(); }); // 快捷方法 $("#form").submit(function(e) { e.preventDefault(); // 阻止默认提交 });五、jQuery 对象与 DOM 对象的转换
1. jQuery 对象转 DOM 对象
$("#msg")[0]; // 第一个元素 $("#msg").get(0); // 第一个元素 $("#msg").eq(0)[0]; // 第一个元素2. DOM 对象转 jQuery 对象
$(document.getElementById("msg")); // 转换为 jQuery 对象六、DOM 遍历
// 向上遍历 $("#city li").each(function(index, element) { console.log(index + ":" + element.innerHTML); }); // 遍历方法 parent()：返回被选元素的直接父元素 parents(选择器)：返回被选元素的所有祖先元素直到html parentsUntil(第二个元素的选择器)：返回两个给定元素之间的所有祖先元素 children(选择器)：返回被选元素的所有直接子元素 find(选择器)：返回被选元素的所有子元素直到最后一个后代七、效果与动画
1. 显示和隐藏
hide(speed, callback); // 隐藏选中的元素 show(speed, callback); // 显示选中的元素 toggle(speed, callback); // 在选中和隐藏中切换2. 淡入淡出
fadeIn(); fadeIn(speed, callback); fadeOut(); fadeOut(speed, callback); fadeToggle(); fadeToggle(speed, callback); fadeTo(speed, opacity, callback); // 设定不透明度3. 滑动
slideDown(speed, callback); // 向上滑动元素 slideUp(speed, callback); // 向下滑动元素 slideToggle(speed, callback); // 向上或向下滑动元素4. 自定义动画
animate({params}, speed, callback); // 自定义动画效果 stop(stopAll, goToEnd); // 停止动画八、最佳实践
- 优先使用
data-*属性：增强代码可维护性 - 使用事件委托：处理动态添加的元素
- 链式调用：提高代码简洁性
- 避免过度嵌套：保持代码可读性
- 使用
$(document).ready()：确保 DOM 加载完成
九、获取 jQuery 文档
- 官方网站：https://jquery.com/
- 中文文档：http://jquery.cuishifeng.cn/
- API 文档：包含所有方法的详细说明和示例
通过以上语法，你可以高效地使用 jQuery 进行 Web 开发，实现丰富的交互效果和 DOM 操作。jQuery 的核心优势在于其简洁的语法和广泛的浏览器兼容性，使 JavaScript 开发变得更加简单和高效。
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙