日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
jQuery插件的寫法

這幾天在學習jQuery插件的寫法，搜索了一些資料，包括jQuery官方的示例，但發(fā)現(xiàn)描述的并不是很清晰。***，終于搜索到一篇講解比較清晰的文章，這里自己總結了一下，并以一個具體的示例來說明jQuery插件的寫法。

創(chuàng)新互聯(lián)公司專注于企業(yè)成都營銷網(wǎng)站建設、網(wǎng)站重做改版、岫巖網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、html5、成都做商城網(wǎng)站、集團公司官網(wǎng)建設、成都外貿網(wǎng)站建設公司、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為岫巖等各大城市提供網(wǎng)站開發(fā)制作服務。

1、概述

先看看html代碼

 
 
    
  
  
  1.  
    2. 
  
  
  2.     
  3. jQuery
    4.  
  
  
  4.     
  5. Asp.net
    6.  
  
  
  6.     
  7. Sql Server
    8.  
  
  
  8.     
  9. CSS
    10.  
  
  
  10.  
    11.

比如我們要實現(xiàn)當光標移動到a標簽上時，a標簽向右移動一段距離，離開時a位置恢復。實現(xiàn)方法如下：

 
 
    
  
  
  1. $(document).ready(function() { 
    2. 
  
  
  2.     $("#catagory a").hover(function() { 
    3. 
  
  
  3.         $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 }); 
    4. 
  
  
  4.     }, function() { 
    5. 
  
  
  5.         $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 }); 
    6. 
  
  
  6.     }); 
    7. 
  
  
  7. }); 
    8.

現(xiàn)在我們將這個方法進行擴展，寫成jQuery插件的形式，以后也能在別的項目中使用，并且可以方便的更改一些屬性值，現(xiàn)在我們來看看jQuery插件的寫法。

2、jQuery插件的結構

下邊這個結構應該是編寫jQuery插件的一個比較好的結構，我將原作者的一些注釋進行了相應的翻譯。

 
 
    
  
  
  1. //為避免沖突，將我們的方法用一個匿名方法包裹起來 
    2. 
  
  
  2. (function($) { 
    3. 
  
  
  3.  
    4. 
  
  
  4.     //擴展這個方法到jquery 
    5. 
  
  
  5.     $.fn.extend({ 
    6. 
  
  
  6.  
    7. 
  
  
  7.         //插件名字 
    8. 
  
  
  8.         pluginname: function() { 
    9. 
  
  
  9.  
    10. 
  
  
  10.             //遍歷匹配元素的集合 
    11. 
  
  
  11.             return this.each(function() { 
    12. 
  
  
  12.  
    13. 
  
  
  13.                 //在這里編寫相應代碼進行處理  
    14. 
  
  
  14.  
    15. 
  
  
  15.             }); 
    16. 
  
  
  16.         } 
    17. 
  
  
  17.     }); 
    18. 
  
  
  18.  
    19. 
  
  
  19.  //傳遞jQuery到方法中，這樣我們可以使用任何javascript中的變量來代替"$"       
    20. 
  
  
  20. })(jQuery);  
    21.

接下來，我們給插件中加入一些可以改變的屬性，這樣用戶可以根據(jù)自己的需要來做一些更改。同時，我們應提供相應的默認值。

 
 
    
  
  
  1. (function($){   
    2. 
  
  
  2.    
    3. 
  
  
  3.     $.fn.extend({    
    4. 
  
  
  4.            
    5. 
  
  
  5.     //將可選擇的變量傳遞給方法 
    6. 
  
  
  6.         pluginname: function(options) {   
    7. 
  
  
  7.    
    8. 
  
  
  8.    
    9. 
  
  
  9.             //設置默認值并用逗號隔開 
    10. 
  
  
  10.             var defaults = {   
    11. 
  
  
  11.                 padding: 20,   
    12. 
  
  
  12.                 mouseOverColor : '#000000',   
    13. 
  
  
  13.                 mouseOutColor : '#ffffff'   
    14. 
  
  
  14.             }   
    15. 
  
  
  15.                    
    16. 
  
  
  16.             var options =  $.extend(defaults, options);   
    17. 
  
  
  17.    
    18. 
  
  
  18.             return this.each(function() {   
    19. 
  
  
  19.                 var o = options;   
    20. 
  
  
  20.                    
    21. 
  
  
  21.                 //這里編寫相應代碼  
    22. 
  
  
  22.                 //可以像下邊這樣獲取變量值  
    23. 
  
  
  23.                 alert(o.padding);   
    24. 
  
  
  24.                
    25. 
  
  
  25.             });   
    26. 
  
  
  26.         }   
    27. 
  
  
  27.     });   
    28. 
  
  
  28.        
    29. 
  
  
  29. })(jQuery);   
    30.

3、實現(xiàn)jQuery插件

 
 
    
  
  
  1. (function ($) { 
    2. 
  
  
  2.     $.fn.extend({ 
    3. 
  
  
  3.         //插件名稱 - paddingList 
    4. 
  
  
  4.         paddingList: function (options) { 
    5. 
  
  
  5.  
    6. 
  
  
  6.             //參數(shù)和默認值 
    7. 
  
  
  7.             var defaults = { 
    8. 
  
  
  8.                 animatePadding: 10, 
    9. 
  
  
  9.                 hoverColor: "Black" 
    10. 
  
  
  10.             }; 
    11. 
  
  
  11.  
    12. 
  
  
  12.             var options = $.extend(defaults, options); 
    13. 
  
  
  13.  
    14. 
  
  
  14.             return this.each(function () { 
    15. 
  
  
  15.                 var o = options; 
    16. 
  
  
  16.  
    17. 
  
  
  17.                 //將元素集合賦給變量 本例中是 ul對象  
    18. 
  
  
  18.                 var obj = $(this); 
    19. 
  
  
  19.  
    20. 
  
  
  20.                 //得到ul中的a對象 
    21. 
  
  
  21.                 var items = $("li a", obj); 
    22. 
  
  
  22.  
    23. 
  
  
  23.                 //添加hover()事件到a 
    24. 
  
  
  24.                 items.hover(function () { 
    25. 
  
  
  25.                     $(this).css("color", o.hoverColor); 
    26. 
  
  
  26.                     //queue false表示不添加到動畫隊列中 
    27. 
  
  
  27.                     $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 }); 
    28. 
  
  
  28.  
    29. 
  
  
  29.                 }, function () { 
    30. 
  
  
  30.                     $(this).css("color", ""); 
    31. 
  
  
  31.                     $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 }); 
    32. 
  
  
  32.                 }); 
    33. 
  
  
  33.  
    34. 
  
  
  34.             }); 
    35. 
  
  
  35.         } 
    36. 
  
  
  36.     }); 
    37. 
  
  
  37. })(jQuery); 
    38.

***，使用插件的方法如下：

 
 
    
  
  
  1. //使用插件 
    2. 
  
  
  2. $(document).ready(function() { 
    3. 
  
  
  3.     $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" }); 
    4. 
  
  
  4. }); 
    5.

網(wǎng)頁名稱：jQuery插件的寫法
文章鏈接：http://m.5511xx.com/article/cdiippi.html