jquery中的$(document).ready()使用小结


Posted in Javascript onFebruary 14, 2014

window.onload = function(){ alert("welcome"); }
这样的写法作用是希望在页面加载完,自动执行定义js代码(function)。

$(document).ready(function(){.... })这个函数是用来取代页面中的window.onload;

document.ready()和传统的方法<body onload=”load()”> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,因此,使用document.ready()方法的执行速度比onload()的方法要快。

Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。

比如:

<script type="text/javascript">
$(document).ready(function () {
alert("我的第一个jQuery代码!");
});
</script>

这段代码的意思是:当Dom Tree加载完成后,显示警告信息。document.ready()和传统的方法<body onload=”load()”> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,因此,使用document.ready()方法的执行速度比onload()的方法要快。

最后要注意两点:

确保在 <body> 元素的onload事件中没有注册函数,否则可能不会触发$(document).ready()事件。(
我尝试用下面的例子来演示这个情况,但是没有成功,所以我想这种情况只是可能发生。)

<html>
<head>
<title>My second jQuery</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
//下面是load的函数含有jquery注册函数$
function load(){
   $("p").append("<b>Hello</b>");
}
//下面是jQuery的代码
$(document).ready(function () {
$("p").append("我的第一个jQuery代码!");
$("p").append("<b>Hello</b>"); 
});
</script>
</head>
<body onload="load()">
<h2>jQuery 简单例子2</h2>
<p>I would like to say: </p> 
</body>
</html>

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
Javascript 相关文章推荐
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
Jquery api 速查表分享
Jan 12 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
js实现简单选项卡制作
Aug 05 Javascript
javascript 终止函数执行操作
Feb 14 #Javascript
中止javascript执行的方法
Feb 14 #Javascript
js replace替换所有匹配的字符串
Feb 13 #Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 #Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 #Javascript
jquery获取元素索引值index()示例
Feb 13 #Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python3实现单目标粒子群算法
2019/11/14 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
pandas中ix的使用详细讲解
2020/03/09 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
Django实现随机图形验证码的示例
2020/10/15 Python
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
数据库基础的一些面试题
2012/02/25 面试题
工程造价专业大专生求职信
2013/10/06 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
单位成立周年感言
2014/01/26 职场文书
技校毕业生自荐信
2014/06/03 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
公民代理授权委托书
2014/09/24 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
企业工会工作总结2015
2015/05/13 职场文书
健康教育主题班会
2015/08/14 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书