使用 $(function() {}) 启动 JavaScript 代码

阅读时长 3 分钟读完

当我们编写前端页面时,通常需要在页面加载完成后执行一些 JavaScript 代码。为确保代码正确执行,我们可以使用 $() 函数来封装代码块,使其在页面完全加载后再执行。

$() 函数的基本用法

$() 函数是 jQuery 中最常用的函数之一,它可以接受一个函数作为参数,该函数将在文档准备就绪时被调用。例如:

上述代码中,我们传递了一个匿名函数给 $() 函数,该函数中的代码将在文档准备就绪时执行。

也可以使用 document.ready 替换 $() 函数:

这两种方式是等效的,都会在文档完全加载后执行其中的代码。

深入理解 $() 函数

在了解 $() 函数的更深层次用法之前,我们需要先掌握一些相关的概念。

DOM 树

DOM(Document Object Model)树是一个由 HTML 元素按照嵌套关系组成的树形结构,它描述了网页的层次结构和内容。通过 DOM 树,我们可以访问和操作 HTML 元素。

页面加载过程

当浏览器开始加载页面时,它会执行以下步骤:

  1. 解析 HTML 文档,并构建 DOM 树;
  2. 加载 CSS 和 JavaScript 文件,执行其中的代码;
  3. 将渲染树绘制到屏幕上。

代码执行时机

当浏览器执行 JavaScript 代码时,它会阻塞页面的解析和渲染过程。如果代码在页面未完全加载时被执行,可能会导致页面元素还未生成而无法访问或操作。

为了避免这种情况,我们需要确保代码仅在页面完全加载后执行。这就是 $() 函数的作用所在。

$() 函数的高级用法

$() 函数除了能够在文档准备就绪时执行代码外,还有一些高级用法。

在特定元素上运行代码

有时我们只想在特定的 HTML 元素上运行代码,可以通过选择器将匿名函数传递给 $() 函数:

上述代码中,我们指定了一个 ID 为 my-id 的元素,并将匿名函数传递给 $() 函数。当该元素准备就绪时,该函数将被调用。

其他等效写法

除了 $()$(document).ready() 外,还有其他等效的写法可供选择:

-- -------------------- ---- -------
-- --- ---
----------------- -
  -- ---- -- ------- -- -------- -----
---

-- --- -------------------
-------------------- ---------- -
  -- ---- -- ------- ---- --- ---- -------- -------
---

总结

$() 函数是 jQuery 中常用的函数之一,可以确保 JavaScript 代码仅在页面完全加载后执行。除了基本用法外,我们还介绍了 $() 函数的高级用法,如在特定元素上运行代码和其他等效写法。

在编写前端代码时,合理使用 $() 函数能够提高代码的可靠性和用户体验。下面是一个简单的示例代码:

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  -------------- ------------
  ------- -----------------------------------------------------------
  --------
    --

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈