当我们编写前端页面时，通常需要在页面加载完成后执行一些 JavaScript 代码。为确保代码正确执行，我们可以使用 $() 函数来封装代码块，使其在页面完全加载后再执行。
$() 函数的基本用法
$() 函数是 jQuery 中最常用的函数之一，它可以接受一个函数作为参数，该函数将在文档准备就绪时被调用。例如：
------------ - -- ---- -- ------- -- -------- ----- ---
上述代码中，我们传递了一个匿名函数给 $() 函数，该函数中的代码将在文档准备就绪时执行。
也可以使用 document.ready 替换 $() 函数：
---------------------------- - -- ---- -- ------- -- -------- ----- ---
这两种方式是等效的，都会在文档完全加载后执行其中的代码。
深入理解 $() 函数
在了解 $() 函数的更深层次用法之前，我们需要先掌握一些相关的概念。
DOM 树
DOM（Document Object Model）树是一个由 HTML 元素按照嵌套关系组成的树形结构，它描述了网页的层次结构和内容。通过 DOM 树，我们可以访问和操作 HTML 元素。
页面加载过程
当浏览器开始加载页面时，它会执行以下步骤：
- 解析 HTML 文档，并构建 DOM 树；
- 加载 CSS 和 JavaScript 文件，执行其中的代码；
- 将渲染树绘制到屏幕上。
代码执行时机
当浏览器执行 JavaScript 代码时，它会阻塞页面的解析和渲染过程。如果代码在页面未完全加载时被执行，可能会导致页面元素还未生成而无法访问或操作。
为了避免这种情况，我们需要确保代码仅在页面完全加载后执行。这就是 $() 函数的作用所在。
$() 函数的高级用法
$() 函数除了能够在文档准备就绪时执行代码外，还有一些高级用法。
在特定元素上运行代码
有时我们只想在特定的 HTML 元素上运行代码，可以通过选择器将匿名函数传递给 $() 函数：
---------------------------- - -- ---- -- ------- ---- ------ -- ----- ---
上述代码中，我们指定了一个 ID 为 my-id 的元素，并将匿名函数传递给 $() 函数。当该元素准备就绪时，该函数将被调用。
其他等效写法
除了 $() 和 $(document).ready() 外，还有其他等效的写法可供选择：
-- --- --- ----------------- - -- ---- -- ------- -- -------- ----- --- -- --- ------------------- -------------------- ---------- - -- ---- -- ------- ---- --- ---- -------- ------- ---
总结
$() 函数是 jQuery 中常用的函数之一，可以确保 JavaScript 代码仅在页面完全加载后执行。除了基本用法外，我们还介绍了 $() 函数的高级用法，如在特定元素上运行代码和其他等效写法。
在编写前端代码时，合理使用 $() 函数能够提高代码的可靠性和用户体验。下面是一个简单的示例代码：
--------- -----
------
------
----- ----------------
-------------- ------------
------- -----------------------------------------------------------
--------
--
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------