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

 更新时间:2011年06月21日 23:43:15   作者:  
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别。
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");
});

相关文章

  • 使用jQuery实现WordPress中的Ctrl+Enter和@评论回复

    使用jQuery实现WordPress中的Ctrl+Enter和@评论回复

    相信大家对QQ中的Ctrl+Enter快捷回复和微博上的@指名回复功能都不陌生,在WordPress的评论栏方面我们同样可以添加这样的功能,一起来看使用jQuery实现WordPress中的Ctrl+Enter和@评论回复的方法:
    2016-05-05
  • jQuery表单验证简单示例

    jQuery表单验证简单示例

    这篇文章主要介绍了jQuery表单验证的方法,结合简单实例形式分析了jQuery针对表单必填项进行验证的方法,需要的朋友可以参考下
    2016-10-10
  • 基于jQuery的消息提示插件之旅 DivAlert(三)

    基于jQuery的消息提示插件之旅 DivAlert(三)

    虽然前面已经写过两篇关于DivAlert的随笔了,也已经实现了我的需求,但是今天发现很多jQuery插件代码中都使用了extend方法,这样确实让默认设置的代码减少了许多。
    2010-04-04
  • EasyUI Pagination 分页的两种做法小结

    EasyUI Pagination 分页的两种做法小结

    这篇文章主要介绍了EasyUI Pagination 分页的两种做法小结的相关资料,需要的朋友可以参考下
    2016-07-07
  • jQuery中prepend()方法使用详解

    jQuery中prepend()方法使用详解

    prepend()方法可以将指定元素插入匹配元素内部开头,主要用到content和selector参数,这篇文章主要给大家介绍jQuery中prepend()方法使用,需要的朋友可以参考下
    2015-08-08
  • layui表格实现代码

    layui表格实现代码

    这篇文章主要为大家详细介绍了layui表格效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 使用jQuery操作Cookies的实现代码

    使用jQuery操作Cookies的实现代码

    Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存,或是从客户端的硬盘读取数据的一种技术
    2011-10-10
  • jquery实现动态画圆

    jquery实现动态画圆

    这篇文章主要给大家分享了一段jquery实现动态画圆代码,需要的朋友可以参考下
    2014-12-12
  • jQuery插件实现文件上传功能(支持拖拽)

    jQuery插件实现文件上传功能(支持拖拽)

    这篇文章主要介绍了jQuery插件实现文件上传功能,可支持拖拽文件上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

    JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

    以前对于JavaScript总是在用到的时候在页面上写几个函数,基本没考虑到函数的封装与重用,最近有个项目可能对于这方面要求有点高,所以就研究了下类似jQuery的封装
    2012-06-06

最新评论