jQuery的入口函数有哪些写法

在使用jQuery进行开发时，入口函数是一个非常重要的概念。入口函数用于确保在DOM完全加载并解析完毕后，再执行相关的jQuery代码。这样可以避免在DOM还未完全加载时就尝试操作DOM元素，从而导致错误。jQuery提供了多种方式来定义入口函数，本文将详细介绍这些写法。

1. $(document).ready()

这是最常见的jQuery入口函数写法。$(document).ready()函数会在DOM完全加载并解析完毕后执行传入的回调函数。这意味着在回调函数中，你可以安全地操作DOM元素。

$(document).ready(function() {
    // 在这里编写你的jQuery代码
    console.log("DOM已加载完毕");
});

1.1 简写形式

$(document).ready()有一个简写形式，即直接使用$()来包裹回调函数。这种写法更加简洁，功能与$(document).ready()完全相同。

$(function() {
    // 在这里编写你的jQuery代码
    console.log("DOM已加载完毕");
});

2. $(window).on('load', function() {})

与$(document).ready()不同，$(window).on('load', function() {})会在整个页面（包括图片、样式表等所有资源）完全加载完毕后执行回调函数。这意味着它的执行时机比$(document).ready()要晚。

$(window).on('load', function() {
    // 在这里编写你的jQuery代码
    console.log("页面所有资源已加载完毕");
});

2.1 使用场景

$(window).on('load', function() {})通常用于需要等待页面所有资源加载完毕后再执行的操作，例如操作图片或依赖外部资源的元素。

3. $(function() {}) 与 $(document).ready() 的区别

虽然$(function() {})和$(document).ready()在功能上是等价的，但它们在使用场景上有一些细微的差别。

• $(document).ready()：更显式地表达了“在DOM加载完毕后执行”的意图，适合在需要明确表达代码意图的场景中使用。
• $(function() {})：更加简洁，适合在代码量较少或需要快速编写的场景中使用。

4. 使用原生JavaScript的DOMContentLoaded事件

虽然jQuery提供了方便的入口函数，但你也可以使用原生JavaScript的DOMContentLoaded事件来实现类似的功能。DOMContentLoaded事件会在DOM加载完毕后触发，但不包括图片等外部资源。

document.addEventListener('DOMContentLoaded', function() {
    // 在这里编写你的jQuery代码
    console.log("DOM已加载完毕");
});

4.1 与jQuery的结合使用

你可以在DOMContentLoaded事件中使用jQuery代码，这样可以确保在DOM加载完毕后执行jQuery操作。

document.addEventListener('DOMContentLoaded', function() {
    $(function() {
        // 在这里编写你的jQuery代码
        console.log("DOM已加载完毕");
    });
});

5. 使用defer属性的<script>标签

在现代Web开发中，你还可以通过在<script>标签中添加defer属性来确保脚本在DOM加载完毕后执行。这种方式不需要显式地编写入口函数，浏览器会自动处理。

<script src="your-jquery-code.js" defer></script>

5.1 注意事项

• defer属性只适用于外部脚本文件，不适用于内联脚本。
• 使用defer属性的脚本会按照它们在文档中出现的顺序执行。

6. 总结

jQuery提供了多种方式来定义入口函数，每种方式都有其适用的场景。$(document).ready()和$(function() {})是最常用的两种方式，它们确保在DOM加载完毕后执行代码。$(window).on('load', function() {})则用于等待页面所有资源加载完毕后再执行代码。此外，你还可以使用原生JavaScript的DOMContentLoaded事件或defer属性的<script>标签来实现类似的功能。

选择合适的入口函数写法，可以确保你的jQuery代码在正确的时机执行，避免因DOM未加载完毕而导致的错误。