简述$(document).ready()方法和window.onload有什么区别？

八股文_JQuery面试题 0 80

$(document).ready()方法和window.onload事件都是用来在文档加载完成后执行JavaScript代码的，但它们在执行时机和功能上存在一些关键的区别。

$(document).ready()：
- 这是jQuery提供的方法，用于在DOM完全加载和解析完成后执行代码，而无需等待样式表、图片等外部资源加载完成。
- $(document).ready()会在HTML文档加载完成后尽早触发，确保可以访问和操作DOM元素（如绑定事件、修改内容等）。
语法：
```
$(document).ready(function() {
   // DOM加载完成后的代码
});
```
window.onload：
- window.onload是原生JavaScript的事件，在浏览器窗口的所有资源（包括HTML、CSS、图片、脚本等）加载完成后才会执行。
- window.onload会等所有的资源（如图片、视频等）都加载完成后再触发，因此它的执行时机较晚。
语法：
```
window.onload = function() {
   // 窗口加载完成后的代码
};
```

$(document).ready()：当DOM元素完全加载并解析完毕，document对象会触发ready事件。这时HTML元素已经加载并且可以操作，但可能其他资源（如图片、CSS等）还没有加载完。
- 适用于在页面加载时快速进行DOM操作，例如绑定事件、修改内容、调整样式等，不需要等待所有资源加载完成。
window.onload：onload事件会等到页面上的所有资源（包括图片、视频、CSS文件、JavaScript文件等）都加载完毕后才会执行。这意味着它的执行时机比$(document).ready()要晚。

$(document).ready()：可以绑定多个ready事件处理程序，所有的事件处理程序会按顺序执行。
window.onload：只会触发一个onload事件处理程序。如果你给window.onload赋值多个函数，只有最后一个会生效（因为onload属性只能存储一个函数）。
例如，多个$(document).ready()事件绑定：
```
$(document).ready(function() {
   console.log('First ready');
});
$(document).ready(function() {
   console.log('Second ready');
});
```
多个window.onload事件绑定：
```
window.onload = function() {
   console.log('First onload');
};
window.onload = function() {
   console.log('Second onload');
};
```
在这个例子中，window.onload只会触发第二个onload函数，因为后赋值的覆盖了前一个。

$(document).ready()：在DOM元素加载并解析完成后就执行，不需要等其他资源加载完成，且可以绑定多个处理函数。推荐在现代Web开发中使用，尤其是在需要尽早操作DOM元素时。
window.onload：在页面的所有资源（包括图片和CSS等）完全加载后才执行，只能绑定一个事件处理函数。

通常情况下，如果你只需要等待DOM加载完毕并进行操作，使用$(document).ready()更为高效和灵活；如果需要等所有资源加载完成，则可以使用window.onload。