jQuery外掛的寫法分享_jquery

1、概述

先看看html代碼

複製程式碼 代碼如下:

li>jQuery
   
• Asp.net

   
• Sql Server

   

CSS

例如我們要實現當遊標移動到a標籤上時，a標籤向右移動一段距離，離開時a位置恢復。實作方法如下： 複製程式碼

程式碼如下:


$(document).ready(>

$(document).ready(function() {    $("#catagory a").hover(function() {
        $(this).animate({ paddingLeft: "20px" }, { queue: false.animate({ paddingLeft: "20px" }); , function() {
        $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });

  🎜>

現在我們將這個方法進行擴展，寫成jQuery插件的形式，以後也能在別的專案中使用，並且可以方便的更改一些屬性值，現在我們來看看jQuery插件的寫法。

2、jQuery插件的結構

下邊這個結構應該是寫jQuery插件的一個比較好的結構，我將原作者的一些註解做了對應的翻譯。

複製程式碼 程式碼如下:

//為避免衝突，將我們的方法用一個匿名方法包起來
(function($) {
    //擴展這個方法到jquery
    $.fn.extend({
     🎜>            //遍歷配對元素的集合
            return this.each(function() { 🎜>            });
        }
    });
 //傳遞jQuery到方法中，這樣我們可以使用任何javascript中的變數來取代"$"     
})(jQuery);



接下來，我們在插件中加入一些可以改變的屬性，這樣使用者可以根據自己的需求來做一些更改。同時，我們應提供相應的預設值。

複製程式碼

程式碼如下:

(function($){ 
    $.fn.extend({  
 //將可選擇的變數傳給方法
       //設定預設值並用逗號隔開
            var defaults = { 
                mouseOverColor : '#000000', 
                          var options = $.extend(defaults, options); 
            return this.each(function() { 
               //這裡寫出對應程式碼
                //可像下邊以以來求變值
                alert(o.padding); 
           );; 🎜>})(jQuery); 



3、實作jQuery外掛程式

複製程式碼

程式碼如下:

(function ($) {
    $.fn.extend({
        //插件名稱- pad      //參數與預設值
            var defaults = {
               "Black"
            };
            var options = $.extend(defaults, options);                var o = options;
                 var obj = $(this);
                //使用ul中的a對象
                var items = $("li a", obj);
               items.hover(function () {
                    $(this).css( "color", o.hoverColor);
                    //queue false表示不加入動畫佇列paddingLeft: o.animatePadding }, { queue: false, duration: 300 } );
                }, function () {
                         $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
                });
        🎜>})(jQuery);



最後，使用外掛程式的方法如下：





複製程式碼

程式碼如下:

//使用外掛程式

$(document). ready(function() {

    $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });});作者：朋友🎜>作者：朋友🎜>作者：朋友🎜>作者：朋友🎜>作者：朋友🎜>作者：朋友🎜>作者：朋友🎜>作者：朋友🎜>作者：朋友🎜>作者的你來源：jQuery學習