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 相关文章推荐
jquery实现树形二级菜单实例代码
Nov 20 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
vue实现菜单切换功能
May 08 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 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 URL验证正则表达式
2011/07/19 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
PHP asXML()函数讲解
2019/02/03 PHP
js与C#进行时间戳转换
2014/11/14 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
python定向爬取淘宝商品价格
2018/02/27 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
完整版商业计划书
2014/09/15 职场文书
离婚协议书格式
2015/01/26 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
Nginx快速入门教程
2021/03/31 Servers
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server