jQuery之$(document).ready()使用介绍


Posted in Javascript onApril 05, 2012

学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载,并且在页面内容加载之前。
If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as theDOM is loaded and before the page contents are loaded.

$(document).ready(function() { 
// put all your jQuery goodness in here. 
});

有很多方法可以确保事件在页面上正常工作,$(document).ready()比其它方法要更有优势。首先,你不必在HTML上放置任何“ 行为性的”标记。另外,你可以将JavaScript/jQuery写入一个独立的js文件,这样既容易维护,又保证了js与页面内容的隔离。如果你在浏览网页时更加细心,你就会常常看见这种情况:当你将鼠标悬停在一个连接时,有时状态栏中会在显示“javascript:void()”这样的消息。这就是你把一个事件直接放在<a href>标签里所造成的。

在一些使用traditional JavaScript的页面,你会在<body>标签中看见“onload”属性。这会导致一个问题:它限定了在body上只能有一个函数事件。是的,因为它又往内容中添加的“行为性的”标签。如果你想解决这个问题,请参考Jeremy Keith的书:DOM Scripting,里面讲述了如何在一个单独的js文件里创建一个 “addLoadEvent” 函数,它允许多个函数可以在body里被加载。但是这种方法需要为本来很简单的问题编写相当数量的代码,另外,这种方法是在加载window时触发这些事件的,这不得不让我再一次想起 $(document).ready()的好处。

使用 $(document).ready(),你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说,一旦DOM在浏览器中注册后,$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时,特效就可以运行了。

Javascript 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
javascript淡入淡出效果的实现思路
Mar 31 #Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 #Javascript
一个关于javascript匿名函数的问题分析
Mar 30 #Javascript
JavaScript 基础篇(一)
Mar 30 #Javascript
js确定对象类型方法
Mar 30 #Javascript
js 浏览器事件介绍
Mar 30 #Javascript
js中eval详解
Mar 30 #Javascript
You might like
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
python实现自动登录
2018/09/17 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
领导干部廉政自律承诺书
2014/05/26 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
上班离岗检讨书
2014/09/10 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
python中sys模块的介绍与实例
2021/04/17 Python