页面加载完成后再执行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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
JavaScript 空间坐标的使用
Aug 19 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 模拟get_headers函数的代码示例
2013/04/27 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
python中文编码问题小结
2014/09/28 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
python如何读取bin文件并下发串口
2019/07/05 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
python 获取字典键值对的实现
2020/11/12 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
美德好少年主要事迹
2014/01/29 职场文书
实习生求职自荐信
2014/02/07 职场文书
社区文化建设方案
2014/05/02 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL