$(document).ready(){}、$(fucntion(){})、(function(){})(jQuery)onload()的区别
1.首先说JQuery的几个写法
$(function(){
//do someting
});
$(document).ready(function(){
//do someting
});
$().ready(function(){
//do someting
})
这三种方法都是JQuery的方法,写法不一样,但是效果一样。
2.这三个写法和$(window).load(function(){...})、onload()的区别
2.1.加载多个函数的问题
<body onload="a();b();">
</body>
在Onload事件中只能这样加载,很丑陋…而在JQuery中你可以利用多个JQuery.Ready()方法,它们会按次序依次执行
2.2代码和内容不分离
这个貌似不用说了,让人深恶痛绝-.-!!
3.3执行先后顺序不同
对于Body.Onload事件,是在加载完所有页面内容才会触发,我的意思是所有内容,包括图片,flash等.如果页面的这些内容很多会让用户等待很长时间.
而对于$(document).ready()方法,这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.
但是对于一些特殊应用,比如图片的放大缩小,图片的剪裁。需要网页所有的内容加载完毕后才执行的呢?我推荐使用$(window).load()方法,这个方法会等
到页面所有内容加载完毕后才会触发,并且同时又没有OnLoad事件的弊端.
3.(function($){})(jQuery)
(function() {
alert("hi");//不一定在dom加载完执行,所以要操作dom对象时需要注意
})(jQuery)
3.1首先(function(){})()这种写法 是创建了一个匿名的方法并立即执行(function(){})这个是匿名方法后面的括号就是立即调用了这个方法)。这样做可以创建一个作用域以保证内部变量与外部变量不发生冲突,比如$ jQuery 等jquery内部定义的变量。
3.2 (function($){})(jQuery) 这个写法主要的作用还是保证jquery不与其他类库或变量有冲突 首先是要保证jQuery这个变量名与外部没有冲突(jquery内部$与jQuery是同一个东西 有两个名字的原因就是怕$与其他变量名有冲突二jQuery与其他变量冲突的几率非常小)并传入匿名对象,匿名对象给参数起名叫做$(其实和jquery内部是一样的) 然后你就可以自由的在(function($){})(jQuery)里写你的插件而不需要考虑与外界变量是否存在冲突。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.7.2.min.js" charset="utf-8" ></script>
</HEAD>
<BODY onload="alert('onload')">
<script type="text/javascript" charset="utf-8" > $(function(){
alert("$(function()");
});
$(document).ready(function(){
alert("$(document).ready");
});
$().ready(function(){
alert("$().ready(function()");
})
//上面三个方法是级别是一样的,按代码的先后顺利执行,是在dom对象加载完 $(window).load(function() {
alert("$(window).load(function()");//是在图片,flash等加载完执行
}); (function() {
alert("hi");//不一定在dom加载完执行,所以要操作dom对象时需要注意
})(jQuery) //弹出先后顺利是:hi-> $(function() -> $(document).ready -> $().ready(function() -> onload -> $(window).load(function()
</script> </BODY>
</HTML>
<转载自:http://www.cnblogs.com/allensoft/archive/2014/04/10/3656202.html>
随机推荐
- [NOIP2013] 提高组 洛谷P1970 花匠
题目描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定 把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希 望剩下的花排列得比较别致. 具 ...
- Linux Hackers/Suspicious Account Detection
catalog . Linux黑客帐号攻击向量 . Linux可疑帐号检测模型 1. Linux黑客帐号攻击向量 0x1: 将黑客帐号添加到"root"组 . useradd ha ...
- [iOS dispatch_once创建单例]
自苹果引入了Grand Central Dispatch (GCD)(Mac OS 10.6和iOS4.0)后,创建单例又有了新的方法,那就是使用dispatch_once函数,当然,随着演进的进行, ...
- ExceptionLess新玩法 — 记日志
ExceptionLess 之前也有介绍过这个框架,其实网上也有很多的资料,无论是部署还是一些详细的高级玩法都讲的很清楚也很棒,博主也学习了一些他们的博文,因为很多的东西比如本地部署别人已经写了,我再 ...
- IDLE快捷键
Ctrl + Space 完成类.方法.变量名称的自动输入,这个快捷键是我最经常使用的快捷键了,它可以完成类.方法.变量名称的自动录入,很方便.(不过在我的电脑上和输入法冲突) Ctrl + N 快 ...
- Python3 学习笔记------迭代器
python 迭代器 要理解python迭代器(iterator),先要理解两个概念:Iterable(可迭代对象).Iterator(迭代器) 先来help()一下Iterator: >> ...
- ARPSpoofing教程(四) - 捕获并分析数据包
本程序的主要目标是展示如何解析所捕获的数据包的协议首部. 这个程序可以称为UDPdump,打印一些网络上传输的UDP数据的信息. 1: #include"pcap.h" 2: ty ...
- STM8S VCAP
There is a specific pin called vcap in stm8s mcu. I recommend this pin connects to a 1uF capacitor w ...
- 初学angular-简单的angular指令
实现一个简单的input清空内容,且清空对应ngModel 前台部分 <html ng-app="hpapp"> <head> <meta chars ...
- 条件运算符(?:)和 $""替代string.Format()
1. 条件运算符(?:)根据Boolean表达式的值返回两个值之一.表达式如下: condition ? first_expression : second_expression 2. $" ...