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 相关文章推荐
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
页面使用密码保护代码
Apr 10 Javascript
js实现网页收藏功能
Dec 17 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 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/11/30 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
javascript 函数速查表
2010/02/07 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
Python Nose框架编写测试用例方法
2017/10/26 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
使用Python发现隐藏的wifi
2020/03/04 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
中专毕业自我鉴定
2013/10/16 职场文书
安全生产检查通报
2014/01/29 职场文书
会走路的树教学反思
2014/02/20 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
运动会口号16字
2014/06/07 职场文书
生物工程专业求职信
2014/09/03 职场文书
工程承包协议书范本
2014/09/29 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
关于学习的决心书
2015/02/05 职场文书
地道战观后感400字
2015/06/04 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python