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. php+C#.net混合开发

    php+C#.net混合开发 上图一张,左右是php语言,右边是C#语言,解决方案中的php项目是红色的小标识

  2. “服务器推”技术【转载+整理】

    原文地址 本文内容 "服务器推(server-push)"技术的应用 基于客户端套接口的"服务器推"技术 基于 HTTP 长连接的"服务器推" ...

  3. Android MarsDaemon实现进程及Service常驻

    前段时间.就讨论过关于怎样让Service常驻于内存而不被杀死,最后的结论就是使用JNI实现守护进程,可是不得不说的是,在没有改动系统源代码的情况下,想真正实现杀不死服务,是一件非常难的事情.眼下除了 ...

  4. 使用jstl报http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar错误

    今天创建了一个maven项目,想使用jstl报http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the ...

  5. ZH奶酪:利用CSS将checkbox选项放大

    在Hybrid App开发过程中,html中默认的checkbox选项在手机屏幕上显得比较小,app不能像web page那样放大缩小,所以要通过CSS将checkbox选项放大: 例如HTML代码: ...

  6. WireShark开启IP, TCP,UDP校验和的办法

    首先点击编辑->首选项

  7. CyclicBarrier的用法

    CyclicBarrier是一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及一组固定大小的线程的程序中,这些线程必须不时地互相等待, ...

  8. Linux(CentOS6.X)安装mysql

    首先执行rpm -qa|grep -i mysql检查一下是否已经安装过mysql mysql-libs-5.1.73-5.el6_6.x86_64 可见已经安装了库文件,应该先卸载,不然会出现覆盖错 ...

  9. java HMAC_SHA1加密算法

      java HMAC_SHA1加密算法 CreationTime--2018年7月14日16点46分 Author:Marydon 1.准备工作 import javax.crypto.Mac; i ...

  10. 【物联网智能网关-17】.NET Micro Framework之MDK C++二次开发

    .NET Micro Framework虽然好学易用,但是在一些需要实时,需要高性能的应用领域,却有些勉为其难.毕竟.NET Micro Framework上层应用程序由底层CLR(TinyCLR)解 ...