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里使用Dom操作Xml
Sep 20 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
javascript event 事件解析
Jan 31 Javascript
javascript读写json示例
Apr 11 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
JS实现无限轮播无倒退效果
Sep 21 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/09 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
为你总结一些php系统类函数
2015/10/21 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
python编写简单爬虫资料汇总
2016/03/22 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
python初步实现word2vec操作
2020/06/09 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
搬家公司的创业计划书
2014/01/01 职场文书
聘任书模板
2014/03/29 职场文书
少儿节目主持串词
2014/04/02 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python