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 相关文章推荐
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 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新手上路(八)
2006/10/09 PHP
PHP SQLite类
2009/05/07 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
给文字加上着重号的JS代码
2013/11/12 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Python数据可视化图实现过程详解
2020/06/12 Python
办公室文员工作自我评价
2013/12/01 职场文书
办公室人员先进事迹
2014/01/27 职场文书
求职信内容怎么写
2014/05/26 职场文书
运动会主持词大全
2015/07/02 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
MySQL限制查询和数据排序介绍
2022/03/25 MySQL