jQuery中处理加载时机的几种方式

第一种：

jQuery(document).ready(function() {

alert("你好");

});

//或

$(document).ready(function() {

alert("你好");

});

第二种：

 jQuery(function() {

alert("你好");

});

//或

$(function() {

alert("你好");

});

第三种：

 (function() {

alert("你好");

})(jQuery);

或

(function() {

alert("你好");

})($);

或

(function() {

    alert("你哈");

})();

以上三种方式，第三种方式的执行优先级比第一种、第二种都要高。第一种和第二种平级。

以上三种又可以用 window.onload = function () {};代替。

$(function(){})和window.onload(){}区别？

1.window.onload(){};需要等页面所有的内容（包括元素的所有关联文件）都加载完成才会执行onload的代码；

$(function(){});在页面的dom元素加载完毕后就执行,而无需等到图片或其他媒体下载完毕；

执行下面这段代码进行验证：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>区别验证</title>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

function img_load(){

    alert($("img").attr("width"));//250

}

$(function(){

    alert($("img").attr("width"));//undefined

    $("img").attr("width","250px");

});

</script>

</head>

<body onload="img_load()">

<img alt="" src="data:images/404.jpg" />

</body>

</html>

$(function(){})和window.onload(){}区别验证

2.$(document).ready()方法可以多次使用而注册不同的事件处理程序，而window.onload一次只能保存对一个函数的引用，多次绑定函数只会覆盖前面的函数。

body.onload和window.onload(){}区别？

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>onload测试</title>

<script type="text/javascript">

function test1(){

    alert("我是test1");//显示

}

function test2(){

    alert("我是test2");//显示

}

</script>

</head>

<body onload="test1(),test2()">

</body>

</html>

onload加载多个函数测试

用$(window).load()加载多个函数

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

//window对象只能保存一个函数的应用

window.onload=function(){

    alert("我是加载一");

};

window.onload=function(){

    alert("我是加载二");//显示

};

//使用下面的方法解决window加载多个函数

$(window).load(function (){

    alert("测试1");//显示

});

$(window).load(function(){

    alert("测试2");//显示

});

</script>

</head>

<body>

</body>

</html>

window.load加载多个函数测试

原文链接：jQuery(document).ready(function($) { });的几种表示方法

【JQuery】jQuery(document).ready(function($) { });的几种表示方法及load和ready的区别的更多相关文章

  1. JS的window.onload与JQuery的$(document).ready(function(){})的区别

    前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...

  2. jQuery的document ready与 onload事件——你真的思考过吗？

    在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...

  3. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  4. Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  5. JQuery的$(document).ready(function(){})与JS的window.onload 的各自优势！

    由于项目需要,使用JQuery也有相当一段时间了.由于经常要处理DOM节点加载.图片显示以及动态资源请求,所以对$(document).ready(function(){})理解也越来越深了,所有在此 ...

  6. jquery ready()的几种实现方法小结

    几种jQuery的ready ()的写法. 1.最常用也是最标准的  $(document).ready(){  });  2.是上面的简写:  $(function(){  })  很奇怪?为什么能 ...

  7. Jquery中"$(document).ready(function(){ })"函数的使用详解

    Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready ...

  8. javascript的window.onload()方法和jQuery的$(document).ready()的对比

    jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...

  9. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解 ----转载

    1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

随机推荐

  1. C# Winform 未能加载文件或程序集"System.Data.SQLite"或它的某一个依赖项。试图加载格式不正确的程序

    在使用Winform 开发了一个小软件,其中使用了SQLite作为数据库 但在我的Win7 64位系统上却出现了以下错误: System.BadImageFormatException: 未能加载文件 ...

  2. HTML常见元素及其属性总结

    HTML视频看完了.视频非常短,主要讲述了有关HTML中经常使用的标记和元素属性的使用.这对理解web开发有非常大的帮助.之前做过的牛腩新闻公布系统中用到了非常短HTML元素,仅仅是跟着视频做,非常多 ...

  3. Sphinx + Coreseek 实现中文分词搜索

    Sphinx + Coreseek 实现中文分词搜索 Sphinx Coreseek 实现中文分词搜索 全文检索 1 全文检索 vs 数据库 2 中文检索 vs 汉化检索 3 自建全文搜索与使用Goo ...

  4. system函数的应用一例

    system函数的应用一例

  5. android学习四（Activity的生命周期）

    要学好活动(Activity).就必需要了解android中Activity的声明周期.灵活的使用生命周期.能够开发出更好的程序,在android中是使用任务来管理活动的,一个任务就是一组存放在栈里的 ...

  6. linux2.6.30.4内核移植（7）——插入hello world驱动模块

    详细步骤参考自:http://www.cnblogs.com/wanyao/archive/2011/11/21/2257628.html 过程比较顺利,结果截图如下: 这里需要注意的是:http:/ ...

  7. Android Things专题 1.前世今生

    文| 谷歌开发人员技术专家, 物联网方向 (IOT GDE) 王玉成(York Wang) 2016 年 12 月,Google 公布了 Developer Preview 版的 Android Th ...

  8. cocos2d-js Shader系列3：多重纹理 multiple textures multiple samplers

    上一篇,我们学习了怎么便捷的控制sprite的颜色,而这个都是默认一个texture的,如果要实现类似mask的效果,或者更个性化的多纹理效果,怎么实现呢? 这就是这一节需要介绍的内容. 例如上图的效 ...

  9. 另一鲜为人知的单例写法-ThreadLocal

    另一鲜为人知的单例写法-ThreadLocal 源代码范例 当我阅读FocusFinder和Choreographer的时候,我发现这两类的单例实现和我们寻经常使用双重检查锁非常不一样.而是用来一个T ...

  10. 【转】Jenkins怎么启动和停止服务

    笔者没有把Jenkins配置到tomcat中,每次都是用命令行来启动Jenkins.但是遇到一个问题:Jenkins一直是开着的,想关闭也关闭不了.百度了一些资料,均不靠谱(必须吐槽一下百度).于是进 ...