jQuery(jquery ui,jquery plugins)插件筆記1

---恢復內容開始---

有時你僅僅是爲了實現一個漸變的動畫效果而不得不把javascrip 從新學習一遍而後書寫大量代碼。直到jQuery的出現，讓開發人員從一大堆繁瑣的js代碼中解脫，取而代之幾行jQuery代碼。現今，jQuery無 疑已成爲最爲流行沒有之一的JavaScript類庫。

　　而jQuery UI 則是在jQuery 基礎上開發的一套界面工具，幾乎包括了網頁上你所能想到和用到的插件以及動畫特效，讓一個毫無藝術感只知道碼字的碼農不費吹灰之力就能夠作出使人炫目的界 面。讓你在作界面的時候隨便‘拿來’就用，還有一點就是，它是免費開源的，用戶可根據須要自定義甚至從新設計。

----------------------------------------------------------------------

在開始學習jquery插件開發以前，咱們先來了解下jqeury各類關係：

----------------------------------------------------------------------

打開jquery官網，這裏有api,有基於jquery開發的各類插件，嚴格的講，jquery ui是jquery官方的界面插件,而這裏的plugins大多數是民間的。

 

api咱們就不看了，若是英文很差，網上還有好多中文的jqueryapi，百度一下就能夠，點擊plugins，能夠看到這裏有不少的插件

能夠根據tags尋找咱們想要的標籤，咱們在搜索框搜索blockUI

這裏有該插件的簡單說明，做者，github地址等等

點開github連接，

這個有關插件的更多介紹。

---------------------------------------------------

感謝：

jQuery插件開發全解析http://www.iteye.com/topic/545971

jQuery.extend 函數詳解http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

教你如何建立本身的 jQuery 插件  http://blog.csdn.net/w809026418/article/details/6193993

--------------------------------------------------------

JQuery插件的開發包括兩種：

一種是類級別的開發，即給jQuery添加新的全局函數，至關於給jquery類自己添加方法，jquery的全局函數就是屬於jquery命名空間的函數。

另外一種是對象級別的插件開發，即給jquery對象添加方法，

 

1、類級別的插件開發

類級別的插件開發最直接的理解就是給jQuery類添加類方法，能夠理解爲添加靜態方法。典型的例子就是$.AJAX()這個函數，將函數定義於jQuery的命名空間中。關於類級別的插件開發能夠採用以下幾種形式進行擴展：

1.1 添加一個新的全局函數

添加一個全局函數，咱們只需以下定義：

1.1 添加一個新的全局函數
1.2 增長多個全局函數

1.3使用jQuery.extend(object);

1.4 使用命名空間

雖然在jQuery命名空間中，咱們禁止使用了大量的javaScript函數名和變量名。可是仍然不可避免某些函數或變量名將於其餘jQuery插件衝突，所以咱們習慣將一些方法封裝到另外一個自定義的命名空間。

經過這個技巧（使用獨立的插件名），咱們能夠避免命名空間內函數的衝突。

jquery.demo.js

;(function($) {

    // 1.1, add a global function
    $.foo = function() {
        alert('this is a test ,this is only a test for global function !');
    };

    // 1.2, add a global function with param
    $.fooWithParam = function(param) {
        alert('this global function takes a parameter, which is named: ' + param + '.');
    };

    // 1.3, define a global function with jQuery.extend(object), this method will add
    // object to global Object of jQuery
    $.extend({
        foo1 : function() {
            alert('this is a test ,this is only a test for global function !');
        },
        fooWithParam1 : function(param) {
            alert('this global function takes a parameter, which is named:  ' + param + '.');
        }
    });

    // 1.4, use nameSpace to avoid conflict
    $.myPlugin = {
        foo2 : function() {
            alert('this is a test ,this is only a test for global function !');
        },
        fooWithParam2 : function(param) {
            alert('this global function takes a parameter, which is named:  ' + param + '.');
        }
    };

})(jQuery);

 

頁面調用：

$("#button").click(function() {
            //調用全局函數
            $.foo();
            $.fooWithParam('hello');

            $.foo1();
            $.fooWithParam1('andy');

            $.myPlugin.foo2();
            $.myPlugin.fooWithParam2('lily');
        });

 

--------------------------------

2、對象級別的插件開發

對象級別的插件開發須要以下的兩種形式：、

形式1：

;
(function($) {
    $.fn.extend({
        pluginName : function(options, collback) {
            // out plugin implementation code goes here;
        }
    });

})(jQuery);

形式2：

;
(function($) {
    $.fn.pluginName = function(options, collback) {
        // out plugin implementation code goes here;
    };

})(jQuery);

上面定義了一個jQuery函數，形式參數是$，函數定義完成之後將jQuery這個實際參數傳遞進去，當即調用執行，這樣寫的好處是，咱們在寫jQuery插件的時候，也可使用$這個別名，而不會與prototype引發衝突。

這時候，插件能夠這樣調用：

$('#myDiv').pluginName();

 

3、總結

jQuery爲開發插件提拱了兩個方法，分別是：

jQuery.fn.extend(object);  給jQuery對象添加方法。
jQuery.extend(object);  爲擴展jQuery類自己.爲類添加新的方法。

3.1 jQuery.fn.extend(object);

fn 是什麼東西呢。查看jQuery代碼，就不難發現。

jQuery.fn = jQuery.prototype = {  

init: function( selector, context ) {//....　  

//......  

};   

原來 jQuery.fn = jQuery.prototype.對prototype確定不會陌生啦。雖然 javascript　沒有明確的類的概念，可是用類來理解它，會更方便。jQuery即是一個封裝得很是好的類，好比咱們用 語句　$("#btn1") 會生成一個 jQuery類的實例。

jQuery.fn.extend(object); 對jQuery.prototype進得擴展，就是爲jQuery類添加「成員函數」。jQuery類的實例可使用這個「成員函數」。

好比咱們要開發一個插件，作一個特殊的編輯框，當它被點擊時，便alert 當前編輯框裏的內容。能夠這麼作：

$.fn.extend({        

     alertWhileClick:function(){       

         $(this).click(function(){      

              alert($(this).val());       

          });       

      }       

});   

$("#input1").alertWhileClick(); //頁面上爲：<input id="input1" type="text"/>

$("#input1")　爲一個jQuery實例，當它調用成員方法 alertWhileClick後，便實現了擴展，每次被點擊時它會先彈出目前編輯裏的內容。

3.2 jQuery.extend(object);　

爲jQuery類添加添加類方法，能夠理解爲添加靜態方法。如：

$.extend({  

    add:function(a,b){return a+b;}  

});  

便爲　jQuery　添加一個爲 add　的　「靜態方法」，以後即可以在引入 jQuery　的地方，使用這個方法了，$.add(3,4); //return 7

 

4，----------------------------------------

(function($){...})(jQuery)其實是匿名函數

 

function(arg){...}
這就定義了一個匿名函數，參數爲arg

而調用函數時，是在函數後面寫上括號和實參的，因爲操做符的優先級，函數自己也須要用括號，即：
(function(arg){...})(param)
這就至關於定義了一個參數爲arg的匿名函數，而且將param做爲參數來調用這個匿名函數

而(function($){...})(jQuery)則是同樣的，之因此只在形參使用$，是爲了避免與其餘庫衝突，因此實參用jQuery
var fn = function($){....};
fn(jQuery);

 

 

5，-------------------------------------

JQuery的extend擴展方法：
      Jquery的擴展方法extend是咱們在寫插件的過程當中經常使用的方法，該方法有一些重載原型，在此，咱們一塊兒去了解了解。
      1、Jquery的擴展方法原型是:　　　

extend(dest,src1,src2,src3...);

      它的含義是將src1,src2,src3...合併到dest中,返回值爲合併後的dest,由此能夠看出該方法合併後，是修改了dest的結構的。若是想要獲得合併的結果卻又不想修改dest的結構，能夠以下使用：

var newSrc = $.extend({},src1,src2,src3...) // 也就是將"{}"做爲dest參數。

      這樣就能夠將src1,src2,src3...進行合併，而後將合併結果返回給newSrc了。以下例：

var result = $.extend({},{name: " Tom " ,age: 21 },{name: " Jerry " ,sex: " Boy " })

 

      那麼合併後的結果

result = {name: " Jerry " ,age: 21 ,sex: " Boy " }

      也就是說後面的參數若是和前面的參數存在相同的名稱，那麼後面的會覆蓋前面的參數值。

      2、省略dest參數
      上述的extend方法原型中的dest參數是能夠省略的，若是省略了，則該方法就只能有一個src參數，並且是將該src合併到調用extend方法的對象中去，如：
 　　一、$.extend(src)
 　　該方法就是將src合併到jquery的全局對象中去，如：

$.extend({
hello:function(){alert( ' hello ' );}
});

 　　就是將hello方法合併到jquery的全局對象中。
 　　二、$.fn.extend(src)
 　　該方法將src合併到jquery的實例對象中去，如:

$.fn.extend({
hello:function(){alert( ' hello ' );}
});

 

　　 就是將hello方法合併到jquery的實例對象中。

 　　下面例舉幾個經常使用的擴展實例：

$.extend({net:{}});

 

　　 這是在jquery全局對象中擴展一個net命名空間。

$.extend($.net,{
hello:function(){alert( ' hello ' );}
})

  　　這是將hello方法擴展到以前擴展的Jquery的net命名空間中去。

 　　3、Jquery的extend方法還有一個重載原型：  

extend(boolean,dest,src1,src2,src3...)

      第一個參數boolean表明是否進行深度拷貝，其他參數和前面介紹的一致，什麼叫深層拷貝，咱們看一個例子：

var result = $.extend( true , {},
{ name: " John " , location: {city: " Boston " ,county: " USA " } },
{ last: " Resig " , location: {state: " MA " ,county: " China " } } );

      咱們能夠看出src1中嵌套子對象location:{city:"Boston"},src2中也嵌套子對象location:{state:"MA"},第一個深度拷貝參數爲true，那麼合併後的結果就是： 

result = {name: " John " ,last: " Resig " ,
location:{city: " Boston " ,state: " MA " ,county: " China " }}

 

       也就是說它會將src中的嵌套子對象也進行合併，而若是第一個參數boolean爲false，咱們看看合併的結果是什麼，以下：

var result = $.extend( false , {},
{ name: " John " , location:{city: " Boston " ,county: " USA " } },
{ last: " Resig " , location: {state: " MA " ,county: " China " } }
);

     那麼合併後的結果就是:

result = {name: " John " ,last: " Resig " ,location:{state: " MA " ,county: " China " }}

 

　　以上就是$.extend()在項目中常常會使用到的一些細節。