jQuery $(document).ready()

时间:2020-01-09 10:47:07  来源:igfitidea点击:

每当我们使用jQuery操作网页时,我们都将等待直到文档就绪事件触发。文档就绪事件表明页面的DOM现在已经就绪,因此我们可以操作它而不必担心尚未创建DOM的某些部分。文档就绪事件在加载所有图像等之前但在整个DOM本身就绪之后触发。

jQuery文档就绪示例

这是一个准备好jQuery文档的侦听器示例:

$(document).ready(function() {

    //DOM manipulation code

});

我们调用jQuery的$函数,并将document对象传递给它。 $函数返回document对象的增强版本。这个增强的对象具有可以调用的" ready()"函数,并将JavaScript函数传递给该对象。 DOM准备就绪后,将执行JavaScript函数。

在传递给ready()方法的函数中,我们可以执行所需的所有jQuery和JavaScript代码,以初始化/增强页面中的HTML元素。在接下来的页面中,我们将看到许多这样的示例。

多个文档就绪侦听器

jQuery允许我们注册多个文档就绪的侦听器。只需多次调用$(document).ready()。这是一个支持多文档的侦听器示例:

$(document).ready(function() {

    //DOM manipulation code

});

$(document).ready(function() {

    //DOM manipulation code

});

当DOM准备就绪时,将同时调用此示例中注册的两个侦听器函数。他们将按照注册顺序被呼叫。

如果我们将HTML页面包含在其他HTML页面中(例如,使用服务器端包含后端/ Web服务器的函数),则注册多个文档就绪事件侦听器将非常有用。我们可能需要在外部页面和内部页面中都进行一些页面初始化。因此,外部页面和内部页面都可以注册文档就绪的侦听器,并执行它们都需要的页面初始化。