jquery加载页面的方法(页面加载完成就执行)


Posted in Javascript onJune 21, 2011

1、$(function(){

$("#a").click(function(){

//adding your code here

});
});
2、$(document).ready(function(){

$("#a").click(function(){

//adding your code here


});
});
3、window.onload = function(){

$("#a").click(function(){

//adding your code here

});
}
html代码为<input type="button" id="a">点击</input>,且页面需要引用jquery的js文件

一般的加载页面时调用js方法如下:

window.onload = function() {
$("table tr:nth-child(even)").addClass("even"); //这个是jquery代码
};

这段代码会在整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM tree全部加载完成,而且要求所有的外部图片和资源全部加载完成。更不幸的是,如果外部资源,例如图片需要很长时间来加载,那么这个js效果就会让用户感觉失效了。

但是用jquery的方法:

$(document).ready(function() {

// 任何需要执行的js特效
$("table tr:nth-child(even)").addClass("even");
});

就仅仅只需要加载所有的DOM结构,在浏览器把所有的HTML放入DOM tree之前就执行js效果。包括在加载外部图片和资源之前。

还有一种简写的方式:

$(function() {

// 任何需要执行的js特效
$("table tr:nth-child(even)").addClass("even");
});

Javascript 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
layui导航栏实现代码
May 19 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
jquery一般方法介绍 入门参考
Jun 21 #Javascript
jquery操作select option 的代码小结
Jun 21 #Javascript
jquery随意添加移除html的实现代码
Jun 21 #Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 #Javascript
基于jquery实现的表格分页实现代码
Jun 21 #Javascript
jquery异步请求实例代码
Jun 21 #Javascript
读jQuery之九 一些瑕疵说明
Jun 21 #Javascript
You might like
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP时间和日期函数详解
2015/05/08 PHP
php use和include区别总结
2019/10/13 PHP
prototype 的说明 js类
2006/09/07 Javascript
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
python解析xml文件实例分享
2013/12/04 Python
python实现将内容分行输出
2015/11/05 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
python解析多层json操作示例
2019/12/30 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
《圆明园的毁灭》教学反思
2014/02/28 职场文书
五一手机促销方案
2014/03/08 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
中国好声音广告词
2014/03/18 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
给客户的感谢信
2015/01/21 职场文书