页面加载完成后再执行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 相关文章推荐
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
js操作iframe父子窗体示例
May 22 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 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中如何判断AJAX提交的数据
2012/02/05 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
详解Python的单元测试
2015/04/28 Python
Python求导数的方法
2015/05/09 Python
Python+django实现简单的文件上传
2016/08/17 Python
Python如何判断数独是否合法
2016/09/08 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
爱国演讲稿500字
2014/05/04 职场文书
活动总结模板大全
2015/05/11 职场文书
《日月潭》教学反思
2016/02/20 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server