jqueryonload事件（jquery onload事件）

## jQuery onLoad 事件详解### 简介在网页开发中，我们经常需要在页面加载完成后执行特定的 JavaScript 代码。例如，初始化页面元素、发送异步请求获取数据等等。jQuery 提供了一个简便的方法来处理这种情况，即 `$(document).ready()` 或简写形式 `$(function(){...})` 。这两种写法实际上是 `window.onload` 事件的 jQuery 封装，它会在 DOM 加载完成后执行回调函数。### $(document).ready() vs window.onload虽然 `$(document).ready()` 和 `window.onload` 都用于在页面加载后执行代码，但它们之间存在着一些区别：

1. 执行时机：

`$(document).ready()`： 当 DOM（文档对象模型） 完全加载并解析后就会被触发，此时图片、视频等外部资源可能还未加载完毕。

`window.onload`：当所有资源（包括图片、视频、样式表等）都加载完成后才会触发。

2. 多次使用：

`$(document).ready()`：可以被绑定多个回调函数，它们会按照绑定的顺序依次执行。

`window.onload`：只能绑定一个回调函数，如果绑定多个，只有最后一个会生效。

3. 简写形式：

`$(document).ready()`：可以使用简写形式 `$(function(){...})`

`window.onload`：没有简写形式### $(document).ready() 的使用使用 `$(document).ready()` 非常简单，只需将需要执行的代码放在回调函数中即可：```javascript $(document).ready(function() {// 在这里编写需要在页面加载完成后执行的代码console.log("页面加载完成！");// 例如：修改页面标题$("h1").text("新的页面标题");// 例如：隐藏一个元素$("#myElement").hide();// 例如：发送 AJAX 请求$.ajax({url: "your_api_endpoint",success: function(data) {// 处理数据}}); });// 或者使用简写形式： $(function() {// 在这里编写需要在页面加载完成后执行的代码 }); ```### 总结`$(document).ready()` 是 jQuery 提供的一个强大的工具，它使得处理页面加载事件变得非常简单。通过理解 `$(document).ready()` 与 `window.onload` 的区别，我们可以更好地选择何时以及如何执行我们的 JavaScript 代码，从而构建更加灵活和动态的网页应用。

jQuery onLoad 事件详解

简介在网页开发中，我们经常需要在页面加载完成后执行特定的 JavaScript 代码。例如，初始化页面元素、发送异步请求获取数据等等。jQuery 提供了一个简便的方法来处理这种情况，即 `$(document).ready()` 或简写形式 `$(function(){...})` 。这两种写法实际上是 `window.onload` 事件的 jQuery 封装，它会在 DOM 加载完成后执行回调函数。

$(document).ready() vs window.onload虽然 `$(document).ready()` 和 `window.onload` 都用于在页面加载后执行代码，但它们之间存在着一些区别：**1. 执行时机：*** `$(document).ready()`： 当 DOM（文档对象模型） 完全加载并解析后就会被触发，此时图片、视频等外部资源可能还未加载完毕。 * `window.onload`：当所有资源（包括图片、视频、样式表等）都加载完成后才会触发。**2. 多次使用：*** `$(document).ready()`：可以被绑定多个回调函数，它们会按照绑定的顺序依次执行。 * `window.onload`：只能绑定一个回调函数，如果绑定多个，只有最后一个会生效。**3. 简写形式：*** `$(document).ready()`：可以使用简写形式 `$(function(){...})` * `window.onload`：没有简写形式

$(document).ready() 的使用使用 `$(document).ready()` 非常简单，只需将需要执行的代码放在回调函数中即可：```javascript $(document).ready(function() {// 在这里编写需要在页面加载完成后执行的代码console.log("页面加载完成！");// 例如：修改页面标题$("h1").text("新的页面标题");// 例如：隐藏一个元素$("

myElement").hide();// 例如：发送 AJAX 请求$.ajax({url: "your_api_endpoint",success: function(data) {// 处理数据}}); });// 或者使用简写形式： $(function() {// 在这里编写需要在页面加载完成后执行的代码 }); ```

总结`$(document).ready()` 是 jQuery 提供的一个强大的工具，它使得处理页面加载事件变得非常简单。通过理解 `$(document).ready()` 与 `window.onload` 的区别，我们可以更好地选择何时以及如何执行我们的 JavaScript 代码，从而构建更加灵活和动态的网页应用。