$(function(){})、(function($){})(jQuery)、$(document).ready(function(){})解析
- $就是jquery的简写,$()就是一个选择器,document是html的所有元素,$(document)返回一个数组,而这个数组是一个对象,这个对象调用ready方法,function则是ready里面的参数,就是说等这个页面全部加载完之后就去执行写入的js。而且在$(document).ready(function(){ });里面写入的js特效是和下一个里面写入的特效是不冲突的,俩者之间是不影响的,因此可以通过$(function(){});在一个页面中加载多个js。$(document).ready(function(){ })的简写就是$(function(){});
-
(function($) {…})(jQuery):
1.原理:
这实际上是匿名函数,如下:function(arg){…},这就定义了一个匿名函数,参数为arg,而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:(function(arg){…})(param)
这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数。而(function($){…})(jQuery)则是一样的,之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQuery
相当于funtion output(s){…};output(jQuery);或者var fn=function(s){…};fn(jQuery);
2).作用(非常有用):
这种写法的最大好处是形成闭包。在(function($) {…})(jQuery)在内部定义的函数和变量只能在此范围内有效。
形成是否函数函数、私有变量的概念。比如:
1 var AA = [1,2,3]; 2 console.log("outer1AA"+AA);//123 3 (function(window,x){ 4 console.log("x1",x);//123 5 x = [3,4,5]; 6 console.log("x2",x);//345 7 console.log("innerAA"+AA);//123 8 })(window,AA); 9 console.log("outer2AA"+AA);//123
//解析:传进参数AA的时候,js做的操作实际上是把AA的内容复制了一份,交给了x,
//(注意,不是把AA指向的地址赋给x),此时x和AA内容相同,可是相互独立。后面对x的修改并不会对AA造成影响。