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

网络转载  2011-06-21   作者:不详   [简洁网络]

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");
});

相关文章

  • 再说AutoComplete自动补全之实现原理

    再说AutoComplete自动补全之实现原理

    再说AutoComplete自动补全之实现原理,这里以asp.net后台为主,考虑到性能最好是生成xml并入缓存。
    2011-11-11
  • 超棒的响应式布局jQuery插件Freetile.js

    超棒的响应式布局jQuery插件Freetile.js

    随着页面扁平化的普及,越来越多的网站都开始使用响应式布局,作为一个优秀的前端工作者,必须要精通的,这里给大家推荐一款响应式布局的jQuery插件。
    2014-11-11
  • 了解jQuery技巧来提高你的代码

    了解jQuery技巧来提高你的代码

    jQuery之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用,是因为它上手和使用相当简单,而且为我们提供了一些人都不知道的相当棒的特性。
    2010-01-01
  • jQuery知识点整理

    jQuery知识点整理

    这篇文章主要介绍了jQuery知识点整理的相关资料,需要的朋友可以参考下
    2015-01-01
  • JQuery菜单效果的两个实例讲解(3)

    JQuery菜单效果的两个实例讲解(3)

    本文跟大家分享了两个Jquery菜单效果,各有各的特色,希望大家都会喜欢,并且能够熟练掌握,感兴趣的码友们可以参考一下
    2015-09-09
  • 实例讲解jquery与json的结合

    实例讲解jquery与json的结合

    这篇文章主要介绍了jquery与json的结合,分为三个阶段,设计htm页面,使用jQuery编写AJAX请求文件,感兴趣的码友们可以参考一下
    2016-01-01
  • jquery 必填项判断表单是否为空的方法

    jquery 必填项判断表单是否为空的方法

    jquery 表单验证,检测表单是否为空
    2008-09-09
  • jQuery中值得注意的trigger方法浅析

    jQuery中值得注意的trigger方法浅析

    在前端页面开发中,我们有时候希望能自定执行一些人性化操作,比如鼠标不用点击自动就能点击等操作,利用传统的js语言需要编写复杂的代码才能实现此功能,这时候我们使用jquery的trigger()方法就能轻松实现。本文就给大家详细介绍了关于jQuery中值得注意的trigger方法。
    2016-12-12
  • jquery实现输入框实时输入触发事件代码

    jquery实现输入框实时输入触发事件代码

    本文主要分享了jquery实现输入框实时输入触发事件的代码,代码简单易懂,需要的朋友一起来看下吧
    2016-12-12
  • jQuery 防止相同的事件快速重复触发方法

    jQuery 防止相同的事件快速重复触发方法

    下面小编就为大家分享一篇jQuery 防止相同的事件快速重复触发方法。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02