jQuery 页面加载完后执行
在前端开发中，经常会遇到需要在页面加载完毕后执行某些操作的情况，比如初始化页面元素、绑定事件或者发送Ajax请求等。为了确保这些操作在页面完全加载完毕后再执行，我们可以使用jQuery提供的一些方法来实现。
1. $(document).ready()
$(document).ready()是jQuery提供的一个方法，用于在文档加载完毕后执行指定的函数。这个方法可以保证函数在DOM树构建完毕之后就会被执行，而不需要等待页面中所有资源（如图片、样式表等）加载完成。
下面是一个示例，代码会在页面加载完毕后弹出一个"Hello, World!"的提示框：
$(document).ready(function(){
alert("Hello, World!");
});
在上面的例子中，$(document).ready()方法接受一个函数作为参数，这个函数就是要在页面加载完毕后执行的代码。你可以在这个函数中执行任何你想要的操作。
2. $(function(){...})
除了$(document).ready()方法，jQuery还提供了一种更简洁的写法，可以达到同样的效果。这种写法是把$(document).ready()方法简化成$(function(){...})。
下面是一个示例，代码会在页面加载完毕后弹出一个"Hello, World!"的提示框：
$(function(){
alert("Hello, World!");
});
在上面的例子中，$(function(){...})本质上是$(document).ready(function(){...})的简写形式，两者是等价的。
3. 使用defer属性
除了上述两种方法，还可以使用HTML标签中的defer属性来延迟脚本执行。defer属性告诉浏览器，这个脚本将在文档解析完毕后执行，而不会阻塞页面的其他下载和呈现。
下面是一个示例，代码会在页面加载完毕后弹出一个"Hello, World!"的提示框：
<script src="script.js" defer></script>
在上面的例子中，script.js是要执行的脚本文件，defer属性告诉浏览器要延迟执行该脚本。
总结
在前端开发中，确保代码在页面加载完毕后执行是非常重要的。通过使用$(document).ready()方法、$(function(){...})简化写法以及使用defer属性，我们可以很方便地实现这一目标。
| 方法 | 描述 |
|---|---|
$(document).ready() |
在文档加载完毕后执行指定的函数 |
$(function(){...}) |
$(document).ready()的简化写法 |
<script src="script.js" defer></script> |
使用defer属性延迟脚本执行 |
通过以上方法，我们可以确保在页面加载完毕后执行我们需要的操作，从而提升用户体验和页面性能。
关系图
下面是一个使用mermaid语法的ER图，展示了$(document).ready()方法、$(function(){...})方法和defer属性之间的关系：
erDiagram
Document -- $(document).ready()
$(document).ready() -- $(function(){...})
Document -- Defer
在上面的关系图中，Document表示文档对象，$(document).ready()表示在文档加载完毕后执行的方法，$(function(){...})表示$(document).ready()方法的简化写法，Defer表示使用defer属性延迟脚本执行。
希望通过本文的介绍，你能够理解并掌握在页面加载完毕后执行代码的方法，并能在实际开发中灵活运用。
