jquery(function(){})與(function(){}(jQuery)的區別
jQuery(function(){});
全寫爲
jQuery(docunemt).ready(function(){
});
意義爲在DOM加載完畢後執行ready()方法
2.
(funtion(){
}(jQuery);
實際執行()(para)匿名方法,只不過傳遞了jQuery對象。
總結:jQuery(funtion(){});用於存放DOM對象的代碼,執行其中代碼時DOM對象已經存在。
不可用於存放開發插件代碼。因爲jQuery對象沒有得到傳遞,外部通過jQuery.methodye
調用不來其中方法。
(funtion(){
}(jQuery);用於存放開發插件的代碼,執行其中代碼DOM不一定存在,直接自動執行DOM操作代碼請小心使用
第二:對於$.extend和$.fn.extend的區別
$.extend(object);爲擴展jQuery類本身.爲類添加新的方法。
$.fn.extend(object);給jQuery對象添加方法。
這二者的區別:一個爲類擴展,一個爲類的實例做擴展!
在放一個便於理解的東西:
jQuery.fn= jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
$.extend({
hialert:function(e){alert(e);}
})
調用:$.hialert(‘hello alert’);
如果爲類的實例做擴展,那麼您需要這麼寫:
$.fn.extend({
hialert:function(e){alert(e);}
});
調用:$(節點).hialert();===>必須實例化一個類!
下面介紹一個實例:爲一個標籤可以叫做元素節點設置樣式
寫插件之前必須導入jquery庫!
插件
(function($){
$.fn.setFont= function(options){
var data = {
color:"red",
fontSize:"15px",
fontWeight:"normal",
fontFamiay:"微軟雅黑"
}
var ds = $.extend(data,options);
$(this).css(ds);
}
})(jQuery);
body體內容
<divid="show">
sssss
</div>
<button id="btn">點擊</button>
調用
$("#btn").click(function(){
$("#show").setFont({color:"blue",fontSize:'30px'});
});
不推薦使用這個做一個元素節點的設置,用內置的$(節點對象).css({})這個方法會更好!