jQuery - script tags in the HTML are parsed out by jQuery and not executed

介绍

jQuery是一个广泛使用的前端JavaScript库,它提供了许多实用的功能,如DOM操作、事件处理、AJAX等。在使用jQuery时,有一个很重要的点需要注意:HTML中的脚本标签(<script>)在被jQuery解析时不会被执行。

背景

在HTML页面中,我们通常使用<script>标签来引入JavaScript文件或直接编写JavaScript代码。例如:

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

在这个例子中,我们引入了一个外部JavaScript文件myscript.js,同时也包含了一段内联JavaScript代码。当浏览器解析该页面时,会按照顺序加载并执行所有的JavaScript代码。

然而,如果我们在使用jQuery时,情况就有所不同了。

解析

当jQuery解析HTML文档时,它会将页面中所有的脚本标签解析出来,并将它们的内容存储在内部变量中。但是,这些脚本标签的代码并不会被立即执行。

相反,它们会在之后的某个时间点被按照它们在文档中出现的顺序执行。这个时间点通常是在DOM树构建完成之后,即$(document).ready()事件触发之前。

这意味着,如果我们在脚本标签内部定义了一些函数或变量,并试图在同一个标签之后的代码中使用它们,那么jQuery解析时就会出现问题,因为它并没有立即执行这些代码。

例如,考虑以下示例:

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

在这个示例中,我们定义了一个名为myFunction的函数,并希望在$(document).ready()事件触发时调用它。然而,由于jQuery解析时并不会执行脚本标签中的代码,所以当事件触发时,myFunction并不存在,这将导致一个错误。

解决方案

为了确保脚本标签中的代码能够正常执行,有两种常见的解决方案:

将代码移动到$(document).ready()事件中

通过将所有的JavaScript代码放到$(document).ready()事件的回调函数中,可以确保它们在DOM树构建完成之后被执行。例如:

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

使用defer属性

HTML5引入了一个名为defer的属性,它可以用来告诉浏览器延迟脚本的执行,直到文档解析和渲染完成。这样,在jQuery解析时也会将脚本标签的代码存储起来,但是它们并不会立即执行。

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

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