jQuery自定義函數(shù)怎么用

這篇文章主要介紹了jQuery自定義函數(shù)怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

jQuery自定義函數(shù)
1.  如何擴(kuò)展jQuery函數(shù)？
jQuery有兩種自定義函數(shù)擴(kuò)展：一種是類級(jí)別的函數(shù)開發(fā)，相當(dāng)于將jQuery看做一個(gè)類，給類本身擴(kuò)展函數(shù)，也叫作全局函數(shù)，。jQuery的全局函數(shù)是屬于jQuery命名空間的函數(shù)，另一種是對象級(jí)別的函數(shù)開發(fā)，即給jQuery選擇器產(chǎn)生的對象添加方法。下面就兩種函數(shù)的開發(fā)做詳細(xì)的說明。

1).全局函數(shù)開發(fā)：
類級(jí)別的插件開發(fā)最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是jQuery.AJAX()這個(gè)函數(shù)，將函數(shù)定義于jQuery的命名空間中。關(guān)于類級(jí)別的插件開發(fā)可以采用如下幾種形式進(jìn)行擴(kuò)展：
a. 添加一個(gè)新的全局函數(shù)
添加一個(gè)全局函數(shù)，我們只需如下定義：

   jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };

然后通過調(diào)用$.test();即可運(yùn)行。
b. 增加多個(gè)全局函數(shù)
添加多個(gè)全局函數(shù)，可采用如下定義：

  jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };  
     jQuery.test1 = function() { 
            alert(‘This is a test1!!!’); 
         };

調(diào)用方式跟上面一樣。

c. 使用jQuery.extend(object)　

jQuery.extend({ 
         test:function() { 
                alert(‘This is a test!!!’); 
         }, 
         test1: function() { 
                alert(‘This is a test1!!!’); 
             },  
         add:function(a,b){ 
             return a+b; 
         } 
});

2).對象級(jí)別函數(shù)開發(fā)：
對象級(jí)別的函數(shù)開發(fā)可以有如下兩種方式
a.

(function(){
.fn.extend({ 
              sayHello:function(){ 
                    alert(‘sayHello’); 
            } 
            }) ; 
          })(jQuery);

說明：該方式也可以直接用jQuery.fn.extend定義，這樣寫是為了將美元符號(hào)限制在一個(gè)命名空間內(nèi)，定義過程中可以繼續(xù)使用該符號(hào)，防止與其他庫的$符號(hào)沖突，沒有其他作用。

b. 接受options參數(shù)以控制插件的行為
當(dāng)自定義函數(shù)需要傳遞很多參數(shù)的時(shí)候，參數(shù)過多，可讀性較差，我們可以考慮傳遞一個(gè)對象，比方說，我們要定義一個(gè)給p設(shè)置背景色和文字顏色的函數(shù)，可以這樣寫：

 $.fn.extend({ 
             setColor:function(options,callback){ 
               var defaults = { 
                               fontcolor: ‘red’, 
                               background: ‘yellow’ 
                             };
            $.extend(defaults, options); //這句話是將default和options合并成一個(gè)對象
            //設(shè)置樣式
            console.log(this);
            $(this).css('background-color',defaults.background);
            $(this).css('color',defaults.fontcolor);
        }     
        }) ;

調(diào)用函數(shù)測試代碼：

       var options={ 
                   fontcolor: ‘blue’, 
                   background: ‘red’  
                   }; 
       $(function(){
        $(".table").setColor(options);
    });

我們會(huì)看到table背景紅色，字體都為藍(lán)色。

2.  分析總結(jié)
jQuery的API手冊中，我們看到，extend實(shí)際上是掛載在jQuery和jQuery.fn上的兩個(gè)不同方法，盡管在jQuery內(nèi)部jQuery.extend()和jQuery.fn.extend()是用相同的代碼實(shí)現(xiàn)的，但是它們的功能卻不太一樣。官方的解釋:

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把兩個(gè)或者更多的對象合并到第一個(gè)當(dāng)中) 
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把對象掛載到j(luò)Query的prototype屬性，來擴(kuò)展一個(gè)新的

jQuery實(shí)例方法)
可以看出，jQuery有靜態(tài)方法和實(shí)例方法之分, 那么jQuery.extend()和jQuery.fn.extend()的區(qū)別就是一個(gè)用來擴(kuò)展靜態(tài)方法，一個(gè)用來擴(kuò)展實(shí)例方法。
jQuery自定義部分源碼如下：

jQuery.extend = jQuery.fn.extend = function(obj){ 
             //obj是傳遞過來擴(kuò)展到this上的對象 
             var target=this; 
             for (var name in obj){ 
             //name為對象屬性 
             //copy為屬性值 
             copy=obj[name]; 
             //防止循環(huán)調(diào)用 
             if(target === copy) continue; 
             //防止附加未定義值 
             if(typeof copy === ‘undefined’) continue; 
             //賦值 
             target[name]=copy; 
             } 
             return target; 
            }

JavaScript方法也是對象，所以所謂的擴(kuò)展函數(shù)，也即是給jQuery.extend, jQuery.fn.extend這兩個(gè)對象擴(kuò)展新的屬性，形參就是我們自定義的函數(shù)，最后會(huì)被拷貝成為target對象返回，并合并到j(luò)Query.extend對象，或者jQuery.fn.extend對象中，本質(zhì)上就是相當(dāng)于給jQuery類本身增加方法或者給jQuery對象的prototype對象增加方法。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jQuery自定義函數(shù)怎么用”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!