jquery 外掛程式開發

// jquery 開發外掛程式

// 向jquery 的命名空間中新增乙個函式，只需將這個新函式指定為 jquery 物件的乙個屬性：

/*jquery.globalfunction = function();

*/// 這樣可以在包含上面的**檔案中呼叫這個外掛程式：

或者寫成 $.globalfunction();

// ******************************====

//可以同時新增多個函式

/*jquery.functionone = function();

jquery.functiontwo = function();

*/// 引用時: $.functionone(); $.functiontwo();

// ***********************************==

// 可以用 $.extend() 函式來使函式更清晰

/*$.extend(,

functiontwo: function()

});*/

// 呼叫時: $.functionone(); $.functiontwo();

// ******************************=

// 以上的方法會面臨命名衝突的風險，為了避免這個問題，最好是把屬於乙個外掛程式的所有全域性函式都封裝到乙個物件中：

/*jquery.myplugin = ,

functiontwo: function()

};*/

//這樣就建立了另乙個命名空間--jquery.myplugin.儘管從某種程度上仍然可以稱為「全域性函式」，但它們實際上已經變成了 myplugin 物件的方法了，而 myplugin 物件則是全域性 jquery 物件的乙個屬性。因此，在呼叫這些函式時，必須包含外掛程式的名稱：

// $.myplugin.functionone(); $.myplugin.functiontwo();

// ********************==

// 建立實用方法

/*jquery.sum = function(array));

return total;

};*/

// 呼叫時: alert($.sum(arr)); 其中 arr = new array(....)

// ********************==

//新增jquery 物件方法

// jquery 中大多數內建的功能都是通過其物件的方法提供的，而且這些方法也是外掛程式的關鍵，增加擴充套件是以 jquery.fn 物件來實現的， jquery.fn 物件是 jquery.prototype 別名，使用別名是出於簡潔的考慮。

/*jquery.fn.mymethod = function();

*/// 呼叫時 $('div').mymethod(); 由於沒有在任何地方用到匹配的 dom 節點，所以乙個合理的例項方法應該包含對它的環境的操作

// ***************==

// 物件方法的環境

// 在任何外掛程式方法內部，關鍵字 this 引用的都是當前的 jquery 物件，因而，可以在 this 上面呼叫任何內建的 jquery 方法，或者提取它包含的 dom 節點並操作該節點,也可以增加連綴方法

/*jquery.fn.swapclass = function(class1, class2)

else if ($element.hasclass(class2))

});};

*/// 呼叫時 $('li').swapclass("class1", "class2").css('text-decoration', 'underline'); 在物件方法體內，關鍵字 this 引用的是一具 jquery 物件，但每次呼叫的 .each() 方法中，this 引用的則是乙個 dom 元素.

// ***************===

//顯示，隱藏，淡入，淡出效果外掛程式開發

jquery.fn.slidefadeout = function(speed, callback), speed, callback);

};jquery.fn.slidefadein = function(speed, callback), speed, callback);

};jquery.fn.slidefadetoggle = function(speed, callback), speed, callback);

};//呼叫

$(document).ready(function() );

$('#in').click(function() );

$('#toggle').click(function() );

});// ***************====

// 別名 $ 的使用， jquery 外掛程式不能假設 $ 有效，相反，每次都應該使用完整的 jquery名稱，為了在外掛程式的內部中使用有效的 $, 可以這樣簡寫 (function($))(jquery); 這個包裝函式接受乙個引數，我們為這個引數傳遞的是全域性的 jquery 物件.由於引數被命名為 $ ,因此在這個函式的內部可以使用 $ 別名而不會衝突.

jquery 外掛程式開發

jQuery 外掛程式開發

jquery 外掛程式開發

jquery 外掛程式開發

相關推薦