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的实现简单的表格中增加或删除下一行
Aug 01 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
node.js实现登录注册页面
Apr 08 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
vue实现lodop打印功能的示例
Nov 11 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
destoon整合UCenter图文教程
2014/06/21 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
React实现轮播效果
2020/08/25 Javascript
Cpy和Python的效率对比
2015/03/20 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
基于python实现删除指定文件类型
2020/07/21 Python
在Python中实现字典反转案例
2020/12/05 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
ASP.NET中的身份验证有那些
2012/07/13 面试题
Java编程面试题
2016/04/04 面试题
外贸实习生自荐信范文
2013/11/24 职场文书
会计职业生涯规划书
2014/01/13 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
病房管理制度范本
2015/08/06 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
教你部署vue项目到docker
2022/04/05 Vue.js