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 29 Javascript
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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
ZF等常用php框架中存在的问题
2008/01/10 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
php-fpm配置详解
2014/02/12 PHP
php实现文件下载实例分享
2014/06/02 PHP
JQuery toggle使用分析
2009/11/16 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
详解Python中is和==的区别
2019/03/21 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
怎样在程序里获得一个空指针
2015/01/24 面试题
中职生自荐信
2013/10/13 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
运动会方队口号
2014/06/07 职场文书
施工单位安全责任书
2014/07/24 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
质量承诺书格式范文
2015/04/28 职场文书