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不是基础的基础
Dec 24 Javascript
js 学习笔记(三)
Dec 29 Javascript
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
使用js获取身份证年龄的示例代码
Dec 11 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Python 类的特殊成员解析
2018/06/20 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
走进敬老院活动总结
2014/07/10 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
国庆节慰问信
2015/02/15 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL