【JQuery】jQuery(document).ready(function($) { });的几种表示方法及load和ready的区别
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的区别的更多相关文章
- JS的window.onload与JQuery的$(document).ready(function(){})的区别
前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...
- jQuery的document ready与 onload事件——你真的思考过吗？
在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解
1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
- Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 ...
- JQuery的$(document).ready(function(){})与JS的window.onload 的各自优势！
由于项目需要,使用JQuery也有相当一段时间了.由于经常要处理DOM节点加载.图片显示以及动态资源请求,所以对$(document).ready(function(){})理解也越来越深了,所有在此 ...
- jquery ready()的几种实现方法小结
几种jQuery的ready ()的写法. 1.最常用也是最标准的 $(document).ready(){ }); 2.是上面的简写: $(function(){ }) 很奇怪?为什么能 ...
- Jquery中"$(document).ready(function(){ })"函数的使用详解
Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready ...
- javascript的window.onload()方法和jQuery的$(document).ready()的对比
jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解 ----转载
1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...
随机推荐
- 转： MinGw离线安装方法集合
转自: http://www.cnblogs.com/smartdog/archive/2012/03/30/2425124.html https://www.zhihu.com/question/2 ...
- （转）Unity3D研究院之Assetbundle的原理（六十一）
Assetbundle 是Unity Pro提供提供的功能,它可以把多个游戏对象或者资源二进制文件封装到Assetbundle中,提供了封装与解包的方法使用起来很便利. 1.预设 A ...
- Node.js中针对中文的查找和替换无效的解决方法
Node.js中针对中文的查找和替换无效的解决方法. //tags的值: tag,测试,帖子 var pos1 = tags.indexOf("测"); //这里返回-1 ta ...
- OpenGL ES Shader语言中的函数不支持递归
An example function definition is given here for a simple function that computes basic diffuse light ...
- mac 苹果鼠标 magic mouse2 当触摸代替点击当触摸板教程
本文解决 mac 苹果鼠标 magic mouse2 触摸代替点击,鼠标当触摸板教程 买了magic mouse2之后,发现官方不推荐使用触摸代替点击,我感觉很不爽,这不就是一个触摸板嘛,于是各种搜软 ...
- [PureScript] Break up Expressions into Cases in PureScript using Simple Pattern Matching
Pattern matching in functional programming languages is a way to break up expressions into individua ...
- [PureScript] Introduce to PureScript Specify Function Arguments
JavaScript does its error-checking at runtime, but PureScript has a compiler, which makes sure that ...
- [Algorithm] Count occurrences of a number in a sorted array with duplicates using Binary Search
Let's say we are going to find out number of occurrences of a number in a sorted array using binary ...
- XE6入门（一）Hello World
XE6的IDE已经设计的非常棒了,是该放弃D7了,投入XE6的怀抱.. 本人用的XE6版本是 Embarcadero.Delphi.XE6.RTM.Inc.Update1.v20.0.16277.12 ...
- js undefined易错分析
undefined 以下是错误写法: data = undefined; alert(undefined==false);//这样判断会输出false; if(data!=undefined || d ...