介绍
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解析时也会将脚本标签的代码存储起来，但是它们并不会立即执行。
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/28955) ，转载请注明来源
[https://www.javascriptcn.com/post/28955](https://www.javascriptcn.com/post/28955)