jQuery 语法

理解 jQuery 语法

jQuery 简化了 HTML 文档的遍历（traversing）、事件处理（event handling）、动画（animating）和 Ajax 交互，从而实现快速 Web 开发。它的语法设计简洁且富有表现力。

核心 jQuery 语法

jQuery 的基本模式是选择 HTML 元素，然后对其执行操作。

基本语法: $(selector).action()

• 美元符号 ($): 这是 jQuery 函数的别名。它用于访问 jQuery 功能和选择元素。
• 选择器 (selector): 用于在文档中查找和选择 HTML 元素的 CSS 风格的选择器字符串。
• 动作 (.action()): 在选中的元素上调用的一个 jQuery 方法，用于执行任务（例如，隐藏 hide、显示 show、添加类 add a class、附加事件监听器 attach an event listener）。

示例:

// 隐藏触发事件的特定元素（常用于事件处理程序内部）
$(this).hide();

// 隐藏页面上的所有段落 (<p>) 元素
$("p").hide();

// 隐藏所有 class 为 "test" 的元素
$(".test").hide();

// 隐藏 id 为 "test" 的单个元素
$("#test").hide();

jQuery 利用了熟悉的 CSS 选择器语法（如元素名、类名、ID、属性、层级等），这使得熟悉 CSS 的开发者能直观地使用它。

文档就绪事件: 确保 DOM 可用

通常，你会看到 jQuery 代码被包裹在一个特殊的结构内:

$(document).ready(function() { // 你的 jQuery 代码在这里… $(“p”).addClass(“initialized”); });

目的: 这确保你的 jQuery 代码只在浏览器完成解析 HTML 文档并完全构建 Document Object Model (DOM) 且可供操作时才运行。

为什么这很重要？在 DOM 准备好之前运行 jQuery 代码可能会导致错误:

• 尝试选择尚未创建的元素会失败。
• 尝试操作不存在的元素将无效或导致错误。
• 如果元素尚未完全加载，尝试获取尺寸（如图像大小）可能会返回不正确的值。

最佳实践: 虽然并非总是严格必要（例如，如果你的 <script> 标签放在 <body> 的末尾），但使用 $(document).ready() 是一种可靠且安全的方式，可以保证你的代码与完全可用的 DOM 进行交互。它是传统 jQuery 开发的基石。

简写语法:

jQuery 为文档就绪事件提供了一种更短的语法:

$(function() { // 你的 jQuery 代码在这里… console.log(“DOM is ready!”); });

这两种语法都能达到相同的结果。选择你觉得更易读的一种。

现代背景: 虽然 $(document).ready() 等待 DOM 树，但它不一定等待图像等外部资源。此外，现代 JavaScript 技术（如将 <script> 标签放在 <body> 的末尾或使用 defer 属性）通常无需显式的就绪处理程序即可达到类似的安全效果，但 jQuery 的这种模式仍然普遍且可靠。