你的專屬定制——JQuery自定義插件
阿新 • • 發佈：2017-09-24
oct prototype javascrip 3.1.1 [] com 全部 doc tro
廣義上分為三類：實例對象方法插件 、全局函數插件 、選擇器插件
全局函數插件是一個類級別的插件,這類插件最大的特點,就是可以直接給jQuery添加靜態方法,並且可以將函數置於jQuery命名空間中. 例如：
1 .插件的文件命名必須嚴格遵循jQuery.[插件名].js的規則，以便於與其他js文件的區
分，如插件名
因此在編寫對象級別的插件時，使用jQuery.fn.extend()方法進行功能擴展;而針對類級別的插件，則使用jQuery.extend()方法進行擴展
3. 無論是對象級別還是類級別插件，結尾都必須以分號結束，否則，在文件被壓縮時，會出現錯誤提示信息
4. 在插件內部的代碼中，如果要訪問每個元素，可以使用this.each方法來遍歷全部元素
5. 需要說明的是在插件的內部，this所代表的是通過jQuery選擇器所獲取的對象，而非傳統意義上的對象的引用
6. 由jQuery代碼在調用方法時，可以采用鏈寫的方法同時調用多個方法，因此，為了保證這個功能的實現，插件本身必須返回一個JQueryl對象
7. 雖然“$’‘符號，可以與jQuery字符相代替，但在編寫插件的代碼中，盡量不要使用“$”符號，以避免與別的代碼沖突 為方便使用，也可以用一個自執行函數包裹所有代碼，在自執行函數中傳入一個形參“$”符號，再傳入一個實參JQuery，這樣就可以放心大膽的使用“$”符號，而不用擔心與別的代碼發生沖突
前 言
絮叨絮叨
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
那麽這次，我就和大家來分享一下JQuery中的一個強大的功能——自定義插件。當我們在去實現一個小功能的時候，比如說banner圖的滾動，插件的使用會讓我們省去大量的代碼。那又當我們會經常使用一個功能然而又懶得每次都去寫怎麽辦？那當然就需要我們自己寫一個屬於自己的插件，用的時候直接拿我們自定義的插件用就可以了。
| JQuery插件類型 |
1實例對象插件
開發能讓所有的jquery實例對象都可以調用的方法。也就是說，只要通過$()獲得 的jquery實例對象，都可以調用我們開發的方法。 本質上來說,是一個對象級別的插件,這類插件首先通過jQuery選擇器獲取對象,並為對象添加方法,然後,將方法進行打包,封閉成一個插件,這種類型的插件編寫簡單,極易調用,也很方便地使用了jQuery中功能強大的選擇器 例如：$.fn.setBgColor = function(bgColor){ //在$.fn聲明的插件函數中，可以使用this代指調用這個插件的對象節點。 //而且this是一個JQUery對象 bgColor = bgColor? bgColor:"#ccc"; //設置背景色的默認值 this.css("background-color",bgColor); } $("#div1").setBgColor("red");
2全局函數插件
可以將獨立的函數添加到jQuery命名空間中了。那麽調用的時候就可以使用 $.函數名稱() 或者jQuery.函數名稱()來調用了。可以理解為靜態方法。全局函數插件是一個類級別的插件,這類插件最大的特點,就是可以直接給jQuery添加靜態方法,並且可以將函數置於jQuery命名空間中. 例如：
$.extend({
func : function(){} //func --> 插件名
});
| JQuery自定義插件要點 |
分，如插件名
因此在編寫對象級別的插件時，使用jQuery.fn.extend()方法進行功能擴展;而針對類級別的插件，則使用jQuery.extend()方法進行擴展
3. 無論是對象級別還是類級別插件，結尾都必須以分號結束，否則，在文件被壓縮時，會出現錯誤提示信息
4. 在插件內部的代碼中，如果要訪問每個元素，可以使用this.each方法來遍歷全部元素
5. 需要說明的是在插件的內部，this所代表的是通過jQuery選擇器所獲取的對象，而非傳統意義上的對象的引用
6. 由jQuery代碼在調用方法時，可以采用鏈寫的方法同時調用多個方法，因此，為了保證這個功能的實現，插件本身必須返回一個JQueryl對象
7. 雖然“$’‘符號，可以與jQuery字符相代替，但在編寫插件的代碼中，盡量不要使用“$”符號，以避免與別的代碼沖突 為方便使用，也可以用一個自執行函數包裹所有代碼，在自執行函數中傳入一個形參“$”符號，再傳入一個實參JQuery，這樣就可以放心大膽的使用“$”符號，而不用擔心與別的代碼發生沖突
| banner圖的滾動實例 |
html代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定義插件實現banner滾動</title> <script src="js/jquery-3.1.1.js" type="text/javascript"></script> <!--導入JQuery--> <script src="js/jquery.scrollBanner.js" type="text/javascript"></script> <!--導入自定義插件 “jquery.scrollBanner.js”--> </head> <body> <div id="banner"> </div> <script type="text/javascript"> $("#banner").scrollBanner({ images : [ {src:"img/banner11.png",title:"banner1",href:"http://www.baidu.com"}, {src:"img/banner22.png",title:"banner2",href:"http://www.sina.com"}, {src:"img/banner33.png",title:"banner3",href:"http://www.qq.com"}, {src:"img/banner44.png",title:"banner4",href:"http://www.zealer.com"}, ] }); </script> </body> </html>
自定義插件代碼
/* 該插件實現了Banner圖的滾動效果。 * * 一、插件的屬性： * images : 接受數組類型，數組的每個值應為對象。對象具有屬性： src->圖片的路徑 title->圖片指上後的文字 href->點擊圖片跳轉的頁面 * * scrollTime : 每張圖片的停留時間，單位毫秒。 2000 * bannerHeight : Banner圖的高度. 500px * * iconColor : 提示圖標的顏色。默認 white * iconHoverColor : 提示圖標指上之後的顏色。 默認 orange * iconPosition : 提示圖標的位置，可選值left/center/right。 默認center * */ !function($){ $.fn.scrollBanner = function(obj){ // 聲明各個屬性的默認值 var defaults = { images : [], scrollTime : 2000, bannerHeight : "500px", iconColor : "white", iconHoverColor : "black", iconPosition : "center", } // 將默認值與傳入的對象比對，如果傳入的對象有未賦值屬性，則使用默認對象的屬性 obj = $.extend(defaults,obj);
// 組建DOM布局 $("body").css({"padding" : "0px","margin" : "0px",}); this.empty().append("<div class=‘scrollBanner-banner‘></div>"); $.each(obj.images,function(index,item){ $(".scrollBanner-banner").append("<div class=‘scrollBanner-bannerInner‘><a href=‘"+item.href+"‘ target=‘_black‘><img src=‘"+item.src+"‘ title=‘"+item.title+"‘ /></a></div>"); }); $(".scrollBanner-banner").append("<div class=‘scrollBanner-bannerInner‘><a href=‘"+obj.images[0].href+"‘ target=‘_black‘><img src=‘"+obj.images[0].src+"‘ title=‘"+obj.images[0].title+"‘ /></a></div>"); this.append("<div class=‘scrollBanner-icons‘></div>"); $.each(obj.images,function(index,item){ //data-* 屬性是H5允許用戶自行在HTML標簽上保存數據的數據 //保存在data-*中的數據，可以使用JS讀取調用 $(".scrollBanner-icons").append("<span class=‘scrollBanner-icon‘ data-index=‘"+index+"‘></span>"); }); //設置各種css this.css({ "width" : "100%", "height" : obj.bannerHeight, "overflow" : "hidden", "position" : "relative", }); $(".scrollBanner-banner").css({ "width" : obj.images.length +1+"00%", "height" : obj.bannerHeight, }); $(".scrollBanner-bannerInner").css({ "width" : 100/(obj.images.length +1)+"%", "height" : obj.bannerHeight, "overflow" : "hidden", "float" : "left" }); $(".scrollBanner-bannerInner img").css({ "width" : "1920px", "height" : obj.bannerHeight, "position" : "relative", "left" : "50%", "margin-left" : "-960px", }); $(".scrollBanner-icons").css({ "width": 35*obj.images.length+"px", "height": "7px", "position" : "absolute", "bottom" : "40px", // "left" : "0px", "z-index": "100", }); switch (obj.iconPosition){ case "left": $(".scrollBanner-icons").css({ "left" : "40px", }); break; case "right": $(".scrollBanner-icons").css({ "right" : "40px", }); break; case "center": $(".scrollBanner-icons").css({ "left" : "50%", "margin-left" : "-"+15*obj.images.length+"px", }); break; } $(".scrollBanner-icon").css({ "width": "20px", "height": "7px", "background-color": obj.iconColor, "display": "inline-block", "margin": "0px 5px", }); $(".scrollBanner-icon:eq(0)").css({ "background-color":obj.iconHoverColor, }); //實現Banner滾動功能 var count = 1; var icons = $(".scrollBanner-icon"); setInterval(function(){ $(".scrollBanner-banner").css({ "margin-left" : "-"+count+"00%", "transition" : "all .5s ease", }); $(".scrollBanner-icon").css("background-color",obj.iconColor); $(".scrollBanner-icon:eq("+count+")").css("background-color",obj.iconHoverColor); if(count>=obj.images.length) $(".scrollBanner-icon:eq("+0+")").css("background-color",obj.iconHoverColor); if(count>obj.images.length){ count = 0; $(".scrollBanner-banner").css({ "margin-left" : "0px", "transition" : "none", }); } count++; },obj.scrollTime); //小圖標指上以後變色並且切換banner圖 $(".scrollBanner-icon").mouseover(function(){ $(".scrollBanner-icon").css("background-color",obj.iconColor); //↓由span觸發mouseover事件，則this指向這個span。 //↓但是，這this是JS對象，必須使用$封裝成JQuery對象。 $(this).css("background-color",obj.iconHoverColor); // console.log($(this).attr("data-index")); var index = $(this).attr("data-index"); count = index;//將計數器count修改為index的值，讓banner滾動的定時器能夠剛好滾到所指圖片的下一張。 $(".scrollBanner-banner").css({ "transition" : "none", "margin-left" : "-"+index+"00%", }); }); } }(jQuery);
效果圖如下：
你的專屬定制——JQuery自定義插件