[TOC] ## 簡單 demo 1. 無鏈式調用 ``` $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); } $(".change").changeStyle("red"); ``` 2. 鏈式調用 ``` $.fn.changeStyle=function(colorStr){ this.css('color',colorStr); return this; } $(".change").changeStyle("red").addClass("bgblue"); //文字變紅,且添加背景為藍色 ``` ## 防止$符號污染的jQuery插件 ``` (function($){ $.fn.changeStyle = function(colorStr){ this.css("color",colorStr); return this; } }(jQuery)); $(".change").changeStyle("red").addClass("bgblue"); ``` ## 傳參插件 1. 直接傳參 ``` (function($){ $.fn.changeStyle = function(colorStr,fontSize){ this.css("color",colorStr).css("fontSize",fontSize+"px"); return this; } }(jQuery)); $(".change").changeStyle("red",32); ``` 2. 通過對象傳值 ``` (function($){ $.fn.changeStyle = function(option){ this.css("color",option.colorStr).css("fontSize",option.fontSize); return this; } }(jQuery)); $(".change").changeStyle({ colorStr:'red', fontSize:32, }); ``` 3. 通過 `$.extend`參數設置默認值 [推薦方案] ``` (function ($) { $.fn.changeStyle = function (option) { var defaultSetting = {colorStr: "green", fontSize: 12}; var setting = $.extend(defaultSetting, option); //合并兩個對象,后面的值覆蓋前面的值 this.css("color", setting.colorStr).css("fontSize", setting.fontSize + "px"); return this; } }(jQuery)); $(".change").changeStyle({ colorStr: 'red', fontSize: 32, }); ```