jQuery中編寫外掛
阿新 • • 發佈：2018-11-07
隔行變色 面向過程 的jQuery外掛程式碼
-
首先是HTML程式碼 如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> <script type="text/javascript" src="js/table-1.1.js" ></script> </head> <body> <table> <tr> <td>編號</td> <td>姓名</td> <td>成績</td> </tr> <tr> <td>編號</td> <td>姓名</td> <td>成績</td> </tr> <tr> <td>編號</td> <td>姓名</td> <td>成績</td> </tr> <tr> <td>編號</td> <td>姓名</td> <td>成績</td> </tr> </table> <script> $("table").table({ odd:"green", evenClass:"yellow" }) </script> </body> </html>
然後JS程式碼 如下：
;(function($){ $.fn.table = function(options){ var defaults = { "odd":"red", "evenClass":"blue" }//定義預設屬性 var options = $.extend(defaults,options)//用extend方法來繼承傳參的資料 this.each(function(){ var _this = $(this) _this.find("tr:odd").css({ background:options.odd })//奇數行變色 _this.find("tr:even").css({ background:options.evenClass })//偶數行變色 }) return this//實現函式連綴 } })(jQuery)
思路如下：
首先把table的表格佈局好，樣式等先寫好之後，再寫功能，這樣才會有條不紊的寫功能！
寫好樣式之後，就考慮怎麼去實現這個功能，說到js 這個寫法，首先我們得知道我們的需求之後
就根據需求來寫功能，按我們現在的這個需求，首先可以知道我們現在的需求是要table的隔行變色，
用jQuery的選擇器找到我們有改變的物件的方法，比如：基本選擇器、過濾選擇器等！我這裡用的是基本選擇器，
找到物件之後就要用這個:even()或者:odd()這兩種方法找到相對應的tr（物件），用css（）的方法將所選擇的tr變色就可以了
寫完了需求之後。建立一個js檔案寫好外掛的基本格式之後把這個功能程式碼丟進這個js包裡面即可！
！！！需要注意的地方：
外掛格式一定要理解清楚，理解是根據什麼得出的邏輯順序跟意思。需要連綴函式的記得要return回這個物件就行了！