页面加载完成后再执行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 动态将数字金额转化为中文大写金额
May 14 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
JS实现移动端在线签协议功能
Aug 22 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 冒泡排序 交换排序法
2011/05/10 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
JavaScript 图像动画的小demo
2012/05/23 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
Python sys.argv用法实例
2015/05/28 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
python如何实现异步调用函数执行
2019/07/08 Python
python获取Pandas列名的几种方法
2019/08/07 Python
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
思想品德自我评价
2014/02/04 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
销售主管竞聘书
2014/03/31 职场文书
公司年会策划方案
2014/05/17 职场文书
学生检讨书范文
2014/10/30 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
清明节主题班会
2015/08/14 职场文书
Python中else的三种使用场景
2021/06/16 Python
python内置模块之上下文管理contextlib
2022/06/14 Python