- 第2版前言
- 本书结构
- 读者对象
- 本书约定
- 读者反馈&示例下载
- 疑难解答&本书勘误
- 第1章 认识 jQuery
- 第2章 jQuery 选择器
- 第3章 jQuery 中的 DOM 操作
- 第4章 jQuery 中的事件和动画
- 第5章 jQuery 对表单、表格的操作及更多应用
- 第6章 jQuery 与 Ajax 的应用
- 第7章 jQuery 插件的使用和写法
- 第8章 用 jQuery 打造个性网站
- 第9章 jQuery Mobile
- 第10章 jQuery 各个版本的变化
- 第11章 jQuery 性能优化和技巧
- 附录A 关于 $(document).ready() 函数
- 附录B Firebug
- 附录C Ajax 的 XMLHttpRequest 对象的属性和方法
- 附录D jQuery $.ajax() 方法的参数详解
- 附录E jQuery 加载并解析 XML
- 附录F 插件 API
- 附录G jQuery 速查表
A.1 $(document).ready() 函数介绍
学习jQuery的第1个步骤就应该学习$(document).ready()函数。例如要在页面上运行一个JavaScript函数,那么就应该将它写在$(document).ready()函数内。在该函数内的所有代码都将在DOM加载完毕后,页面全部内容(包括图片等)完全加载完毕前被执行。
jQuery代码如下:
$(document).ready()函数相比其他获得JavaScript事件并执行相应事件的函数有很多优势。
该函数不需要在HTML代码中进行任何行为
标记,就可以分离JavaScript代码到每一个独立的文件中。因此很容易对与内容无关的代码进行维护。当光标在一个链接上悬停时,在浏览器的状态栏中会出现javascript:void()
的信息,该信息就是由于在一个<a>标签中直接写入一个事件而产生的。
在一些传统的页面中,可能会在<body>标签里有onload属性,该属性限定只能执行一个函数,并且同时也将行为
标记引入到了页面内容中。Jeremy Keith所著的《DOM Scripting》展示了如何创建一个addLoadEvent函数以便将JavaScript分离成单独的文件,并允许加载多个函数。但是它需要一定数量且复杂的代码去实现这个功能。同时,用它加载的函数,也是必须要等页面所有内容被加载完毕后才执行。由于以上种种原因本书选择了更为先进的$(document).ready()函数。
在$(document).ready()函数括号中的所有代码都会提前(只要DOM在浏览器中被注册完毕)被执行,而不是在页面所有内容(例如图片等占用带宽的内容)加载完毕之后才执行事件。它允许用户在第一眼看到元素的时候,就能立即看到元素产生的一些隐藏效果、显示效果和其他效果。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论