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 相关文章推荐
js 纯数字不重复排列的另类方法
Jul 17 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
vue组件横向树实现代码
Aug 02 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 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面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
php curl选项列表(超详细)
2013/07/01 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
python入门之基础语法学习笔记
2020/02/08 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
无偿献血倡议书
2014/04/14 职场文书
质量安全标语
2014/06/07 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
2014国庆节标语口号
2014/09/19 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书