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 获取LI里的内容
Dec 17 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
js打开新窗口方法整理
Feb 17 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
JSON 数据格式详解
Sep 13 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Django自定义分页效果
2017/06/27 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
Python基于requests库爬取网站信息
2020/03/02 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
银行会计业务的个人自我评价
2013/11/02 职场文书
平安工地建设方案
2014/05/06 职场文书
庆六一活动总结
2014/08/29 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
负责培养人意见
2015/06/05 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书