jquery 和js执行顺序

原创

mob649e815e9bc9 2024-06-24 05:49:54 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815e9bc9的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 和 JavaScript 执行顺序

在前端开发中，jQuery 和 JavaScript 是常用的两种脚本语言，它们在网页中起着至关重要的作用。在开发过程中，了解它们的执行顺序对于编写高效的代码至关重要。本文将介绍 jQuery 和 JavaScript 的执行顺序，并通过代码示例和序列图来说明。

JavaScript 的执行顺序

JavaScript 是网页开发中最基础的脚本语言，它可以直接操作文档对象模型（DOM），实现页面的交互效果。当浏览器加载网页时，会按照页面中标签的顺序依次执行 JavaScript 代码。例如，在以下示例中，先执行 alert('Hello')，再执行 alert('World')：

alert('Hello');
alert('World');

如果代码中存在耗时较长的操作，比如网络请求或循环等，会阻塞后续代码的执行，导致页面出现假死现象。因此，在编写 JavaScript 代码时，建议避免长时间运行的操作，可以使用异步操作或定时器进行处理。

jQuery 的执行顺序

jQuery 是一个优秀的 JavaScript 框架，提供了更便捷、简洁的方法操作 DOM 元素。与 JavaScript 不同的是，jQuery 会在整个文档加载完成后再执行代码，确保 DOM 元素已经全部加载完毕。例如，在以下示例中，先执行 alert('Hello')，再执行 alert('World')：

$(document).ready(function() {
  alert('Hello');
});

alert('World');

在上面的示例中，通过 $(document).ready() 方法可以确保在文档加载完成后再执行代码。这样就避免了在文档尚未加载完成时操作 DOM 元素，导致代码执行失败的情况。

jQuery 和 JavaScript 的执行顺序

在网页中同时使用 jQuery 和 JavaScript 时，需要注意它们的执行顺序。通常情况下，jQuery 会在整个文档加载完成后执行，而 JavaScript 会按照标签的顺序依次执行。如果在 JavaScript 中操作了尚未加载完成的 DOM 元素，可能会导致执行错误。

为了解决这个问题，可以在 JavaScript 代码中使用 window.onload 事件或 jQuery 的 $(document).ready() 方法来确保所有 DOM 元素加载完成后再执行代码。示例如下：

window.onload = function() {
  alert('JavaScript onload');
};

$(document).ready(function() {
  alert('jQuery document ready');
});

在上面的示例中，window.onload 事件和 $(document).ready() 方法分别确保了 JavaScript 和 jQuery 的执行顺序，避免了代码执行错误的情况。

序列图

下面是一个使用 mermaid 语法表示的序列图，展示了 jQuery 和 JavaScript 的执行顺序：

sequenceDiagram
    participant Browser
    participant Document
    participant jQuery
    participant JavaScript

    Browser ->> Document: 加载文档
    Document ->> jQuery: 执行 jQuery 代码
    jQuery ->> Document: DOM 加载完成
    Document ->> JavaScript: 执行 JavaScript 代码

通过上面的序列图，可以清晰地看到 jQuery 和 JavaScript 的执行顺序，帮助我们更好地理解两者之间的关系。