jquery加载页面的方法(页面加载完成就执行)


Posted in Javascript onJune 21, 2011

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 相关文章推荐
window.parent与window.openner区别介绍
Apr 12 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
jQuery返回定位插件详解
May 15 jQuery
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
如何基于viewport vm适配移动端页面
Nov 13 Javascript
jquery一般方法介绍 入门参考
Jun 21 #Javascript
jquery操作select option 的代码小结
Jun 21 #Javascript
jquery随意添加移除html的实现代码
Jun 21 #Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 #Javascript
基于jquery实现的表格分页实现代码
Jun 21 #Javascript
jquery异步请求实例代码
Jun 21 #Javascript
读jQuery之九 一些瑕疵说明
Jun 21 #Javascript
You might like
php实现简易聊天室应用代码
2015/09/23 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
利用Python如何生成hash值示例详解
2017/12/20 Python
python日志logging模块使用方法分析
2019/05/23 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python元组的概念知识点
2019/11/19 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
《一件运动衫》教学反思
2014/02/19 职场文书
施工安全协议书范本
2014/09/26 职场文书
大学军训决心书
2015/02/05 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
小学庆六一主持词
2015/06/30 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
详解MindSpore自定义模型损失函数
2021/06/30 Python
基于Python编写一个监控CPU的应用系统
2022/06/25 Python