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 学习笔记二 字符串拼接
Mar 28 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
javascript实现倒计时关闭广告
Feb 09 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 isset()与empty()的使用区别详解
2010/08/29 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Python中函数的用法实例教程
2014/09/08 Python
python简单实现旋转图片的方法
2015/05/30 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python Kmeans算法原理深入解析
2019/08/23 Python
python实现复制文件到指定目录
2019/10/16 Python
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
幼师个人总结范文
2015/02/28 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
音乐课外活动总结
2015/05/09 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript