博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在页面加载后执行任务
阅读量:4703 次
发布时间:2019-06-09

本文共 1407 字,大约阅读时间需要 4 分钟。

注:本笔记内容摘自《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 οnlοad=”doStuff();”>
也可以在JavaScript代码中指定该函数:
window.οnlοad=doStuff;
这两种方式都会导致在页面加载完成后执行这个函数。但第2种方式的优点在于,它能使行为更清晰地从标记中分离出来。现在,假设我们有定义了第2个函数:
function doOtherStuff(){
       //执行另外一种任务… …
}
我们也可以将它指定为基于页面的加载来运行:
window.οnlοad= doOtherStuff;
然而,这次指定的函数会取代刚才指定的第1个函数。因为.onload属性一次只能保存对一个函数的引用,所以不能在现有的行为基础上再增加新行为。
对于这种情况下,通过$(document).ready()机制能够得到很好的处理。每次调用那个这个方法都会向内部的行为队列中添加一个新函数,当页面加载完成后,所有函数都将得到执行。而且,这些函数会按照注册它们的顺序依次执行。
 
缩短代码的简写方式
       前面提到的$(document).ready()结构,实际上是在基于document这个DOM元素构建而成的jQuery对象上,调用了.ready()方法。因为这是一个常用方法,所以$()函数为我们提供了一种简写方式。当调用这个函数而不传递参数时,该函数的行为就像是传递了document参数。也就是说,对于:
       $(document).ready(function(){
              //这里是代码
});
也可以简写成:
$().ready(function(){
       //这里是代码
});
此外,这个工厂函数也可以接受另一个函数作为参数。此时,jQuery会在内部执行一次对.ready()的隐含调用,因此,使用下面的代码也可以得到相同的结果:
$(function(){
       //这里是代码
});
虽然这几种语法都更短一些,但程序设计者们通常更喜欢使用较长的形式能够更清楚地表示代码在做什么。
<转:>

转载于:https://www.cnblogs.com/kevin-yuan/archive/2012/08/13/2636305.html

你可能感兴趣的文章
win7系统中开启wifi热点
查看>>
干货|最详尽的神经网络基础
查看>>
翻转字符串和左旋转字符串
查看>>
wampserver配置多站点
查看>>
找不到请求的 .Net Framework Data Provider。可能没有安装
查看>>
实验室管理系统(SQL+VS)
查看>>
C# protogen 处理protobuf生成cs文件
查看>>
oracle_SQL 实验查询及删除重复记录 依据条件 (row)
查看>>
SSM框架搭建
查看>>
[UE4]蓝图比C++慢10倍,是吗?
查看>>
使用IdleTest进行TDD单元测试驱动开发演练(1)
查看>>
零基础入门深度学习(2) - 线性单元和梯度下降
查看>>
复杂系统的解与儒道佛
查看>>
异数OS TCP协议栈测试(四)--网卡适配篇
查看>>
Scala字符串插值
查看>>
Windows服务的安装、卸载
查看>>
情景英语-美国情景会话大全 精选
查看>>
微软职位内部推荐-Senior SDE
查看>>
守护进程
查看>>
初入linux系统
查看>>