页面加载完成后再执行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 中令人困惑的变量赋值
Aug 13 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
chrome原生方法之数组
Nov 30 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
js实现文字截断功能
Sep 14 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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
记录mysql性能查询过程的使用方法
2013/05/02 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
javascript RadioButtonList获取选中值
2009/04/09 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
python中的代码编码格式转换问题
2015/06/10 Python
深入理解python多进程编程
2016/06/12 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
Python运行DLL文件的方法
2020/01/17 Python
Python3监控疫情的完整代码
2020/02/20 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
学前教育求职自荐信范文
2013/12/25 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
人事任命书格式
2014/06/05 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
降价通知函
2015/04/23 职场文书
创业计划书之面包店
2019/09/12 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript