首頁 > web前端 > H5教程 > 主體

jQuery自訂函數應用程式以及解析

php中世界最好的语言
發布: 2018-03-14 15:35:50
原創
2622 人瀏覽過

這次帶給大家jQuery自訂函數應用程式以及解析,使用jQuery自訂函數的注意事項有哪些,下面就是實戰案例,一起來看一下。

jQuery自訂函數
1.  如何擴充jQuery函數?
jQuery有兩種自訂函數擴充:一種是類別層級的函數開發,相當於將jQuery看做一個類,給類別本身擴充函數,也叫作全域函數,。 jQuery的全域函數是屬於jQuery命名空間的函數,另一種是物件層級的函數開發,也就是為jQuery選擇器產生的物件新增方法。下面就兩種函數的開發做詳細的說明。

1).全域函數開發:
類別層級的外掛程式開發最直接的理解就是為jQuery類別加入類別方法,可以理解為新增靜態方法。典型的例子就是jQuery.AJAX()這個函數,將函數定義在jQuery的命名空間中。關於類別層級的外掛程式開發可以採用以下幾種形式進行擴充:
a. 新增一個新的全域函數
新增一個全域函數,我們只需如下定義:

   jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };
登入後複製

      然後透過調用$.test();即可運作。
b. 增加多個全域函數
新增多個全域函數,可採用如下定義:

  jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };  
     jQuery.test1 = function() { 
            alert(‘This is a test1!!!’); 
         };
登入後複製

呼叫方式跟上面一樣。

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).物件層級函數開發:
物件層級的函數開發可以有以下兩種方式
a.  

(function(){
.fn.extend({ 
              sayHello:function(){ 
                    alert(‘sayHello’); 
            } 
            }) ; 
          })(jQuery);
登入後複製

說明:該方式也可以直接用jQuery.fn.extend定義,這樣寫是為了將美元符號限制在一個命名空間內,定義過程中可以繼續使用該符號,防止與其他庫的$符號衝突,沒有其他作用。

b. 接受options參數以控制插件的行為
當自訂函數需要傳遞很多參數的時候,參數過多,可讀性較差,我們可以考慮傳遞一個對象,比方說,我們要定義一個為p設定背景色和文字顏色的函數,可以這樣寫:

 $.fn.extend({ 
             setColor:function(options,callback){ 
               var defaults = { 
                               fontcolor: ‘red’, 
                               background: ‘yellow’ 
                             };
            $.extend(defaults, options); //这句话是将default和options合并成一个对象
            //设置样式
            console.log(this);
            $(this).css('background-color',defaults.background);
            $(this).css('color',defaults.fontcolor);
        }     
        }) ;
登入後複製

呼叫函數測試程式碼:

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

我們會看到table背景紅色,字體都是藍色。
jQuery自訂函數應用程式以及解析
2.  分析總結
jQuery的API手冊中,我們看到,extend其實是掛載在jQuery和jQuery.fn上的兩個不同方法,儘管在jQuery內部jQuery .extend()和jQuery.fn.extend()是用相同的程式碼實現的,但是它們的功能卻不太一樣。官方的解釋:

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中) 
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性,来扩展一个新的
登入後複製

jQuery實例方法)
可以看出,jQuery有靜態方法和實例方法之分, 那麼jQuery.extend()和jQuery.fn.extend()的差別就是一個用來擴充靜態方法,一個用來擴充實例方法。
jQuery自訂部分原始碼如下:

jQuery.extend = jQuery.fn.extend = function(obj){ 
             //obj是传递过来扩展到this上的对象 
             var target=this; 
             for (var name in obj){ 
             //name为对象属性 
             //copy为属性值 
             copy=obj[name]; 
             //防止循环调用 
             if(target === copy) continue; 
             //防止附加未定义值 
             if(typeof copy === ‘undefined’) continue; 
             //赋值 
             target[name]=copy; 
             } 
             return target; 
            }
登入後複製

JavaScript方法也是對象,所以所謂的擴充函數,也即是給jQuery.extend, jQuery.fn.extend這兩個物件擴充新的屬性,形參就是我們自訂的函數,最後會被拷貝成為target物件返回,並合併到jQuery.extend對象,或者jQuery.fn.extend物件中,本質上就是相當於給jQuery類別本身增加方法或者給jQuery物件的prototype物件增加方法。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

如何使用jquery的分頁外掛

怎麼做出京東商品詳情的放大鏡效果

javascript如何實現小球跳動效果

#

以上是jQuery自訂函數應用程式以及解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板