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 相关文章推荐
jQuery 无刷新分页实例代码
Nov 12 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
vue实现页面切换滑动效果
Jun 29 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
理解PHP5中static和const关键字的区别
2007/03/19 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
python一键去抖音视频水印工具
2018/09/14 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
中国医药集团国药在线:国药网
2017/02/06 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
模具专业自荐信
2014/05/29 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript