页面加载完成后再执行JS的jquery写法以及区别说明


Posted in Javascript onFebruary 22, 2014

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 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 #Javascript
文本框水印提示效果的简单实现代码
Feb 22 #Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 #Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 #Javascript
jquery取消选择select下拉框示例代码
Feb 22 #Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 #Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 #Javascript
You might like
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
Python基于select实现的socket服务器
2016/04/13 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
实习自我鉴定模板
2013/09/28 职场文书
销售顾问的岗位职责
2013/11/13 职场文书
运动会四百米广播稿
2014/01/19 职场文书
《母鸡》教学反思
2014/02/25 职场文书
中考标语大全
2014/06/05 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python