jQuery中document与window以及load与ready 区别详解

当我们在做前端开发时，常常会用到jQuery这个框架。在使用jQuery的过程中，了解document与window、load与ready的区别是非常重要的。下面详细讲解一下这些知识点。

document与window

在jQuery中，document和window都是DOM对象，在使用jQuery进行元素选取时可以使用$()对它们进行选择。但是它们代表的具体内容是不同的。

• document：指的是整个HTML文档，包括HTML、head、body等标签，可以通过document对象进行操作，例如document.write("Hello World!")可以在HTML页面中输出Hello World!。
• window：指的是整个浏览器窗口，它包括了导航栏、菜单栏、地址栏以及整个视口，我们可以通过window对象来对整个浏览器窗口进行控制，例如window.location.href = "http://www.baidu.com"可以让浏览器跳转到百度搜索首页。

load与ready

在使用jQuery时，load和ready都是常用的函数，它们的含义和用法也有一些差别。

• load：表示页面中的所有元素（如图片、音频、视频等）都已经加载完毕后才执行相应的事件或函数。例如：

$(window).load(function(){
    //页面所有元素（包括图片等）加载完毕后执行的事件或函数
});

• ready：表示文档结构已经加载完成，即DOM已经构建完毕，但是元素还没有加载完成。例如：

$(document).ready(function(){
    //文档结构加载完成后执行的事件或函数
});

需要注意的是，$().ready()也可以使用简写，即$()。例如：

$(function(){
    //文档结构加载完成后执行的事件或函数
});

这种写法更加简洁。

示例说明

下面给出两个示例说明。

1. 使用load函数在所有元素加载完毕后弹出提示框。

$(window).load(function(){
    alert("所有元素加载完毕！");
});

1. 使用ready函数输出#div元素的内容。

HTML代码：

<div id="div">Hello World!</div>

jQuery代码：

$(document).ready(function(){
    console.log($("#div").text());  //输出：Hello World!
});

以上就是jQuery中document与window以及load与ready的区别详解，希望能对你有所帮助。