在文章中我们的代码有一个奇特的$(function(){});这代表的是什么意思呢?其实这短短的几个字符中的含义并不那么简单,并且还相当的复杂。不但这样,它还是诸多新手中非常容易出错的地方。甚至jquery对它的支持都有些bug要注意的地方。这个表达式如此的重要,所以我们一定要来好好的研究一番。
首先要说的是$(function(){});其实是一个简写,它等同于jquery的$(document).ready(function(){})。所以大家可以知道其实function那个函数修饰符号去掉的话,它的表达式就更简单就直接是$()。这是非常容易的jquery的变量定义搞混淆的!我个人对这种写法是非常的不以为然,但js开发和现状嘛...大家知道的,怎么方便怎么来呗。比如写成$(#box)它就表示一个id为box的dom节点,这...实在是很无语。但是现实已经是这样了,大家就背下来好了,当然这对从C/C++转过来的人来说一定是非常的痛苦,估计这也是为什么会有个专门的职业叫前端程序员的原因...
发了,不扯那么多。那么这个函数的意义是什么呢?考虑没有jquery的情况下我们怎样执行一段js代码呢?其实传统来说,只要写在script/script标签内就可以了。但这样有个问题,就是对于某些浏览器来说,如果其中的代码涉及到某个dom节点的位置在这段代码之后的话就可能会失败。原因是代码在html文档的前面,浏览器读到它的时候就执行了,而dom节点在它后面浏览器还没读取到呢,所以不知道怎样去操作这个节点,于是报错了。你会说为什么不等到所有节点都读取完了再回头执行js代码呢?关键是有些代码就是想在页面出来一部分时就执行了啊。所以对于那些在页面读取完才执行的代码通常会页面的onload中去。但onload又有自己的问题,比如onload的window的还有body的,执行的时机很是不好确定。于是jquery推出了$(document).ready(function(){})它的设计目标有以下几个(可看作jquery的ready函数与js的onload的区别):
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行;
$(document).ready()是dom结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行。
特别是第二点,大大的方便了代码初始化的分离操作,确实是jquery对开发人员的巨大贡献。否则各个代码块中都要自己想办法在初始化函数中加入自己的那一部分,会相当的混乱。当然在各浏览器为实现这个目的是有自己的扩展的--可惜的是互相间不怎么兼容,写起来也是很不方便。
另外传统是onload是这样写的:
bodyonload=fn1(),fn2()/body
而我们提到的$(document).ready()是dom解析完成后,不用等待图片等资源加载即可开始执行了,那么要等待的话怎么办呢?难道要写上面那种传统的代码吗?当然不是,jquery中是使用$(window).load(function()。例如:
$(window).load(function(){alert(hello,我是jQuery!);});
而且这个函数同样可以写多个,它们之间同样不会覆盖。会依次顺序执行!
但是!但是!大家一定要仔细看这一节内容。这只是jquery的设计目标,这是什么意思呢?就是说在实际运行时有的浏览器可能会有问题。是的,就算是jquery如此著名的控件有时也是有很明显的bug的。我手头上的32位firefox52.x版本就是不能在jquery2.0.0中完好的执行多个$(document).ready(function(){})的。解决的方法其实也很简单:那就是换一个版本的jquery...这其实也挺痛苦的,因为jquery一共有jquery1.x、jquery2.x、jquery3.x三个大的版本,小版本就更加多了。如果你以为要用最新的3版本,那你就错了。其实上现在比较好的方法是,手机上尽量用最新的,而pc上最好是使用最新的版本1.x。什么叫最新的1.x?是这样的jquery2以后就不支持ie6/7/8了,而这种需求又很大,所以jquery的1.x仍然在修改维护,只是不加新功能了而已。我的上面那个问题就是通过更新到jquery-1.11.3后解决的,这其实不是最新的1.x不过听说太新的有可能有别的问题,而这个版本兼容性好罢了。总之大家在pc上如果某个常用功能不行的话,可以考虑升级到1.x的最高版本。当然如果是非常追求新功能的不考虑ie兼容性的那么直接用最新的jquery版本就好了。不过要提醒的是,jquery并不仅仅是在ie上才有不兼容的现象,如我上面的那个问题,其实的浏览器同样会的,所以尽可能测试各种浏览器才是真正的版本选择标准。
最后提供一个下载各个版本jquery的好地方,如图:
微软的jquery下载点本来最好是应该是google的cdn分流的,但是国内访问google嘛...你懂的。所以用这个吧,这个也非常的棒!因为它来自强大的微软...另外对那些依赖网上的jquery或者别的js/css模块的cdn的人,我想说的是最好还是放个在自己的站点上,这些cdn没你想象的那么可靠,我都被坑个好几次了。
好了,以上内容希望对有前端开发任务的非专业前端开发程序员有用:)专业前端请路过吧