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 相关文章推荐
jQuery创建插件的代码分析
Apr 14 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 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为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
深入理解python对json的操作总结
2017/01/05 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
python识别验证码图片实例详解
2020/02/17 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
教育学习自我评价
2014/02/03 职场文书
安全标兵事迹材料
2014/08/17 职场文书
学习普通话的体会
2014/11/07 职场文书
语文教师个人工作总结
2015/02/06 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
python playwright 自动等待和断言详解
2021/11/27 Python
python使用shell脚本创建kafka连接器
2022/04/29 Python