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 cookie解码函数(兼容ff)
Mar 17 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 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
SONY SRF-M100的电路分析
2021/03/02 无线电
PHP ajax 分页类代码
2008/11/13 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
JS类的封装及实现代码
2009/12/02 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
面试常见的js算法题
2017/03/23 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
金蝶的一道SQL笔试题
2012/12/18 面试题
期末总结的个人自我评价
2013/11/02 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
设计顾问服务计划书
2014/05/04 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
小学教育见习总结
2015/06/23 职场文书
基督教追悼会答谢词
2015/09/29 职场文书