jQuery自定義插件
jQuery是一個功能強大的庫，提供了開發(fā)JavaScript項目所需的所有核心函數(shù)。然而，有時候我們還是需要使用自定義代碼來擴(kuò)展這些核心函數(shù)來提高開發(fā)效率。
jQuery庫是為了加快JavaScript的開發(fā)速度而設(shè)計的，通過簡化編寫JavaScript的方式，減少代碼量。
jQuery編寫插件有兩種方式
1.添加jQuery對象級別的插件，原理是給jQuery類添加方法。
寫法如下：
(function($){ $.fn.extend({ 函數(shù)名:function(自定義參數(shù)){ //自定義插件代碼部分 } });})(jQuery);//第二種寫法(function($){ $.fn.函數(shù)名=function(自定義參數(shù)){ //自定義插件代碼 }})(jQuery);//調(diào)用方法("#id").函數(shù)名(參數(shù));2.添加jQuery類級別的方法，也就是添加靜態(tài)方法
寫法如下：
(function($){ $.extend({ 函數(shù)名:function(自定義參數(shù)){ //自定義插件代碼 } });})(jQuery);//第二種寫法(function($){ $.函數(shù)名=function(自定義參數(shù)){ //自定義插件代碼 }})(jQuery);//調(diào)用方式$.函數(shù)名(參數(shù));jQuery插件的種類
1.對象級別插件開發(fā)，即給jQuery對象添加方法，封裝對象方法的插件，例如：append()、val()。
2.類級別插件開發(fā)，即給jQuery添加全局函數(shù)，相當(dāng)于給類本身添加方法，例如：$.ajax();
jQuery的插件機制
jQuery為開發(fā)插件提供了兩種方法。
1. jQuery.fn.extend(object)，給jQuery對象添加方法。
2. jQuery.extend(object)，給jQuery類添加方法。
這兩個方法接收的參數(shù)都是一個對象，類型為Object，Object里面的”名/值”分別對應(yīng)”函數(shù)名/函數(shù)主體”。
fn是什么
查看jQuery源碼：
<span style="font-size:12px;">jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//.... //...... }; </span> 從源碼中查看，可以得出：
jQuery.fn=jQuery.prototype//fn指向jQuery對象的原型，即為jQuery類添加成員函數(shù)。
這里我寫一個簡單的例子來實現(xiàn)一個最簡單的插件，僅僅是用來說明一下如何使用jQuery開發(fā)插件。
<!doctype html><html><head><meta charset="utf-8"><title>自定義jQuery插件</title><script src="plugs/jquery-2.2.3.min.js"></script><script>//這是一個自定義的jQuery插件(function(){ $.fn.extend({ myFirst:function(){ var s="This is my first jQuery"; $(this).append(s); } });})(jQuery);</script></head><body><div id="i1"></div><script>$("#i1").myFirst();</script></body></html>執(zhí)行以后返回的頁面為：
以上僅僅介紹如何使用jQuery開發(fā)自定義插件，會使用以后就可以開發(fā)更復(fù)雜的插件了。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
