页面加载完成后再执行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 10件让人费解的事情
Feb 15 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
js实现简易拖拽的示例
Oct 26 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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中上传多个文件的表单设计例子
2014/11/19 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
laravel model 两表联查示例
2019/10/24 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
python使用matplotlib绘制热图
2018/11/07 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
python实现随机加减法生成器
2020/02/24 Python
Django实现celery定时任务过程解析
2020/04/21 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
python怎么删除缓存文件
2020/07/19 Python
python 如何区分return和yield
2020/09/22 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
技术总监个人的自我评价范文
2013/12/18 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
民主生活会剖析材料
2014/09/30 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
一百条裙子读书笔记
2015/07/01 职场文书