jQuery中$.fn的用法示例介紹
阿新 • • 發佈：2019-02-17
$.fn是指jquery的名稱空間，加上fn上的方法及屬性，會對jquery例項每一個有效，下面有個不錯的示例，喜歡的朋友可以參考下
如擴充套件$.fn.abc(),即$.fn.abc()是對jquery擴充套件了一個abc方法,那麼後面你的每一個jquery例項都可以引用這個方法了.
那麼你可以這樣子：$("#div").abc();
jQuery為開發外掛提拱了兩個方法，分別是：
jQuery.extend(object);為擴充套件jQuery類本身.為類新增新的方法。
jQuery.fn.extend(object);給jQuery物件新增方法。
fn是什麼東西呢。檢視jQuery程式碼，就不難發現。
複製程式碼
程式碼如下:
jQuery.fn = jQuery.prototype ={
init: function( selector, context ){//....
//......
};
原來 jQuery.fn =jQuery.prototype.對prototype肯定不會陌生啦。
jQuery便是一個封裝得非常好的類，比如我們用語句 $("#btn1") 會生成一個 jQuery類的例項。
jQuery.extend(object); 為jQuery類新增新增類方法，可以理解為新增靜態方法。如：
複製程式碼
程式碼如下:
$.extend({
add:function(a,b){returna+b;}
});
jquery中{}表示一個物件，可以定義方法
便為 jQuery 新增一個方法名為add 的 “靜態方法”，之後便可以在引入 jQuery 的地方，使用這個方法了，
$.add(3,4); //return 7
jQuery.fn.extend(object);對jQuery.prototype進得擴充套件，就是為jQuery類新增“成員函式”。jQuery類的例項可以使用這個“成員函式”。
比如我們要開發一個外掛，做一個特殊的編輯框，當它被點選時，便alert當前編輯框裡的內容。可以這麼做：
jQuery程式碼
複製程式碼
程式碼如下:
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
如擴充套件$.fn.abc(),即$.fn.abc()是對jquery擴充套件了一個abc方法,那麼後面你的每一個jquery例項都可以引用這個方法了.
那麼你可以這樣子：$("#div").abc();
jQuery為開發外掛提拱了兩個方法，分別是：
jQuery.extend(object);為擴充套件jQuery類本身.為類新增新的方法。
jQuery.fn.extend(object);給jQuery物件新增方法。
fn是什麼東西呢。檢視jQuery程式碼，就不難發現。
複製程式碼
程式碼如下:
jQuery.fn = jQuery.prototype ={
init: function( selector, context ){//....
//......
};
原來 jQuery.fn =jQuery.prototype.對prototype肯定不會陌生啦。
jQuery便是一個封裝得非常好的類，比如我們用語句 $("#btn1") 會生成一個 jQuery類的例項。
jQuery.extend(object); 為jQuery類新增新增類方法，可以理解為新增靜態方法。如：
複製程式碼
程式碼如下:
$.extend({
add:function(a,b){returna+b;}
});
jquery中{}表示一個物件，可以定義方法
便為 jQuery 新增一個方法名為add 的 “靜態方法”，之後便可以在引入 jQuery 的地方，使用這個方法了，
$.add(3,4); //return 7
jQuery.fn.extend(object);對jQuery.prototype進得擴充套件，就是為jQuery類新增“成員函式”。jQuery類的例項可以使用這個“成員函式”。
比如我們要開發一個外掛，做一個特殊的編輯框，當它被點選時，便alert當前編輯框裡的內容。可以這麼做：
jQuery程式碼
複製程式碼
程式碼如下:
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});