页面加载完成后再执行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 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
Python解决鸡兔同笼问题的方法
2014/12/20 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
python匿名函数的使用方法解析
2019/10/10 Python
python zip()函数使用方法解析
2019/10/31 Python
快速查找Python安装路径方法
2020/02/06 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
公司领导推荐信
2013/11/12 职场文书
自主招生自荐书
2013/11/29 职场文书
社区服务活动小结
2014/07/08 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
学生检讨书怎么写
2015/05/07 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS