jQuery中$.fn的用法示例介紹
更新時(shí)間：2013年11月05日 17:51:20 作者：
$.fn是指jquery的命名空間，加上fn上的方法及屬性，會(huì)對(duì)jquery實(shí)例每一個(gè)有效，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下
$.fn是指jquery的命名空間，加上fn上的方法及屬性，會(huì)對(duì)jquery實(shí)例每一個(gè)有效。
如擴(kuò)展$.fn.abc(),即$.fn.abc()是對(duì)jquery擴(kuò)展了一個(gè)abc方法,那么后面你的每一個(gè)jquery實(shí)例都可以引用這個(gè)方法了.
那么你可以這樣子：$("#div").abc();
jQuery為開發(fā)插件提拱了兩個(gè)方法，分別是：
jQuery.extend(object);為擴(kuò)展jQuery類本身.為類添加新的方法。
jQuery.fn.extend(object);給jQuery對(duì)象添加方法。
fn是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。
jQuery.fn = jQuery.prototype ={
init: function( selector, context ){//....
//......
};
原來(lái) jQuery.fn =jQuery.prototype.對(duì)prototype肯定不會(huì)陌生啦。
jQuery便是一個(gè)封裝得非常好的類，比如我們用語(yǔ)句 $("#btn1") 會(huì)生成一個(gè) jQuery類的實(shí)例。
jQuery.extend(object); 為jQuery類添加添加類方法，可以理解為添加靜態(tài)方法。如：
$.extend({
add:function(a,b){returna+b;}
});
便為 jQuery 添加一個(gè)為add 的 “靜態(tài)方法”，之后便可以在引入 jQuery 的地方，使用這個(gè)方法了，
$.add(3,4); //return 7
jQuery.fn.extend(object);對(duì)jQuery.prototype進(jìn)得擴(kuò)展，就是為jQuery類添加“成員函數(shù)”。jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。
比如我們要開發(fā)一個(gè)插件，做一個(gè)特殊的編輯框，當(dāng)它被點(diǎn)擊時(shí)，便alert當(dāng)前編輯框里的內(nèi)容。可以這么做：
jQuery代碼
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
如擴(kuò)展$.fn.abc(),即$.fn.abc()是對(duì)jquery擴(kuò)展了一個(gè)abc方法,那么后面你的每一個(gè)jquery實(shí)例都可以引用這個(gè)方法了.
那么你可以這樣子：$("#div").abc();
jQuery為開發(fā)插件提拱了兩個(gè)方法，分別是：
jQuery.extend(object);為擴(kuò)展jQuery類本身.為類添加新的方法。
jQuery.fn.extend(object);給jQuery對(duì)象添加方法。
fn是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。
復(fù)制代碼 代碼如下:
jQuery.fn = jQuery.prototype ={
init: function( selector, context ){//....
//......
};
原來(lái) jQuery.fn =jQuery.prototype.對(duì)prototype肯定不會(huì)陌生啦。
jQuery便是一個(gè)封裝得非常好的類，比如我們用語(yǔ)句 $("#btn1") 會(huì)生成一個(gè) jQuery類的實(shí)例。
jQuery.extend(object); 為jQuery類添加添加類方法，可以理解為添加靜態(tài)方法。如：
復(fù)制代碼 代碼如下:
$.extend({
add:function(a,b){returna+b;}
});
便為 jQuery 添加一個(gè)為add 的 “靜態(tài)方法”，之后便可以在引入 jQuery 的地方，使用這個(gè)方法了，
$.add(3,4); //return 7
jQuery.fn.extend(object);對(duì)jQuery.prototype進(jìn)得擴(kuò)展，就是為jQuery類添加“成員函數(shù)”。jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。
比如我們要開發(fā)一個(gè)插件，做一個(gè)特殊的編輯框，當(dāng)它被點(diǎn)擊時(shí)，便alert當(dāng)前編輯框里的內(nèi)容。可以這么做：
jQuery代碼
復(fù)制代碼 代碼如下:
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
您可能感興趣的文章:
相關(guān)文章
這里給大家介紹一款兼容各大瀏覽器的jQuery處理cookies的插件jQuery.cookie，有需要的小伙伴們可以參考下2014-11-11
我正在研究JQuery框架，其下的插件十分豐富，使用十分簡(jiǎn)單，功能也十分強(qiáng)大2012-03-03
Html5的placeholder屬性(IE兼容)實(shí)現(xiàn)代碼
Placeholder是HTML5新增的另一個(gè)屬性，當(dāng)input或者textarea設(shè)置了該屬性后，該值的內(nèi)容將作為灰字提示顯示在文本框中，當(dāng)文本框獲得焦點(diǎn)時(shí)，提示文字消失。以前要實(shí)現(xiàn)這效果都是用JavaScript來(lái)控制才能實(shí)現(xiàn) , firefox、google chrome等表示對(duì)其支持 , 唯獨(dú)IE不支持2014-08-08
近期研究了下MenuButton,有了新的感悟，原先在那個(gè)DEMO中右鍵支持做法，現(xiàn)在看來(lái)真是小兒科啊2012-07-07
jQuery mobile的header和footer在點(diǎn)擊屏幕的時(shí)候消失的解決辦法
這篇文章主要介紹了jQuery mobile的header和footer在點(diǎn)擊屏幕的時(shí)候消失的解決辦法，通過(guò)給header和footer添加 data-position="fixed" 和 data-tap-toggle="false"完成此功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
jquery 操作單選框，復(fù)選框，下拉列表實(shí)現(xiàn)代碼
jquery 操作單選框，復(fù)選框，下拉列表實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-10-10
jquery中checkbox使用方法簡(jiǎn)單實(shí)例演示
這篇文章主要介紹了jquery中checkbox使用方法簡(jiǎn)單實(shí)例演示，感興趣的小伙伴們可以參考一下2015-11-11
jquery異步請(qǐng)求實(shí)例代碼，需要的朋友可以參考下。2011-06-06
基于jquery的bankInput銀行卡賬號(hào)格式化
jquery bankInput插件是銀行卡進(jìn)行格式化顯示，能控制文本框輸入最小最大個(gè)數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時(shí)插件能實(shí)現(xiàn)自動(dòng)加載格式化顯示和支持非輸入框的格式話顯示2012-08-08
這篇文章主要介紹了淺析jQuery Mobile的初始化事件,jQuery是當(dāng)前人氣最高的JavaScript庫(kù),需要的朋友可以參考下2015-12-12