现在的位置: 首页 > 综合 > 正文

learning jQuery学习笔记三 — 在页面加载后执行任务

2017年12月03日 ⁄ 综合 ⁄ 共 1345字 ⁄ 字号 评论关闭

注:本笔记内容摘自《jQuery基础教程》+ jQuery 1.4.1中文参考

代码执行的时机选择

$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。虽然$(document).ready()和onload具有类似的效果,但是,它们在触发操作的时间上存在着微妙的差异。

当一个文档完全下载到浏览器中时,会触发window.onload事件处理程序,则会在DOM完全就绪并可以使用时调用。虽然也意味着所有元素对脚本而言都是可以访问的,但是,却不意味着所有关联的文件都已经下载完毕。换句话说,HTML下载完成并解析为DOM树之后,代码就可以运行。

当我们使用$(document).ready()进行设置时,这个界面就会更早地准备好可用的正确行为(相对于onload而言)。

 

基于一个页面执行多个脚本

       通过JavaScript注册事件处理程序的传统机制是,把一个函数指定给DOM元素的对应属性。例如,假设我们已经定义了如下函数:

function doStuff(){

       //执行某种任务… …

}

那么,我们既可以在HTML标记中指定该函数:

<body onload=”doStuff();”>

也可以在JavaScript代码中指定该函数:

window.onload=doStuff;

这两种方式都会导致在页面加载完成后执行这个函数。但第2种方式的优点在于,它能使行为更清晰地从标记中分离出来。现在,假设我们有定义了第2个函数:

function doOtherStuff(){

       //执行另外一种任务… …

}

我们也可以将它指定为基于页面的加载来运行:

window.onload= doOtherStuff;

然而,这次指定的函数会取代刚才指定的第1个函数。因为.onload属性一次只能保存对一个函数的引用,所以不能在现有的行为基础上再增加新行为。

对于这种情况下,通过$(document).ready()机制能够得到很好的处理。每次调用那个这个方法都会向内部的行为队列中添加一个新函数,当页面加载完成后,所有函数都将得到执行。而且,这些函数会按照注册它们的顺序依次执行。

 

缩短代码的简写方式

       前面提到的$(document).ready()结构,实际上是在基于document这个DOM元素构建而成的jQuery对象上,调用了.ready()方法。因为这是一个常用方法,所以$()函数为我们提供了一种简写方式。当调用这个函数而不传递参数时,该函数的行为就像是传递了document参数。也就是说,对于:

       $(document).ready(function(){

              //这里是代码

});

也可以简写成:

$().ready(function(){

       //这里是代码

});

此外,这个工厂函数也可以接受另一个函数作为参数。此时,jQuery会在内部执行一次对.ready()的隐含调用,因此,使用下面的代码也可以得到相同的结果:

$(function(){

       //这里是代码

});

虽然这几种语法都更短一些,但程序设计者们通常更喜欢使用较长的形式能够更清楚地表示代码在做什么。

抱歉!评论已关闭.