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 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
微信小程序实现多张图片上传功能
Nov 18 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
第十三节--对象串行化
2006/11/16 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
js 替换
2008/02/19 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
python斐波那契数列的计算方法
2018/09/27 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
Python连接字符串过程详解
2020/01/06 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
实习自我鉴定模板
2013/09/28 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
Python中常见的导入方式总结
2021/05/06 Python