jQuery編寫(xiě)設(shè)置和獲取顏色的插件
分享一下編寫(xiě)設(shè)置和獲取顏色的插件,首先我將插件的名字命名為jquery.color.js。
該插件用來(lái)實(shí)現(xiàn)以下兩個(gè)功能
- 設(shè)置元素的顏色。
- 獲取元素的顏色。
先在搭建好如下編寫(xiě)插件的框架:
;(function($){ //這里編寫(xiě)插件代碼 })(jQuery);
我這里采用jQuery.fn.extend().這種方法來(lái)編寫(xiě),代碼如下:
;(function($){ $.fn.extend({ "color":function(value){ //這里寫(xiě)插件代碼 } }); })(jQuery);
這個(gè)方法可里面有一個(gè)value.參數(shù),當(dāng)給color().這個(gè)傳入了參數(shù)那么就用來(lái)設(shè)置color.值,不傳參數(shù)就是獲取color().值。代碼如下:
;(function($){ $.fn.extend({ "color":function(value){ if(value==undefined){ return this.css('color'); } else{ return this.css('color',value); } } }); })(jQuery);
最后我們來(lái)測(cè)試一下:
<body> <script> $(function(){ alert($('#div1').color()); $('#div2').color('#333'); }); </script> <div id="div1" style="color:blue">blue</div> <div id="div2" style="color:#ccc">#ccc</div> </body>
測(cè)試結(jié)果如下圖:
OK!測(cè)試沒(méi)問(wèn)題,全部完成。做這篇分享只是為了分享一下如何實(shí)現(xiàn)編寫(xiě)插件的整個(gè)過(guò)程
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- 基于jquery插件編寫(xiě)countdown計(jì)時(shí)器
- jQuery插件編寫(xiě)步驟詳解
- 基于jquery編寫(xiě)的放大鏡插件
- 基于jquery編寫(xiě)分頁(yè)插件
- jQuery彈簧插件編寫(xiě)基礎(chǔ)之“又見(jiàn)彈窗”
- 編寫(xiě)自己的jQuery提示框(Tip)插件
- 編寫(xiě)簡(jiǎn)單的jQuery提示插件
- 基于編寫(xiě)jQuery的無(wú)縫滾動(dòng)插件
- Jquery插件編寫(xiě)簡(jiǎn)明教程
- 編寫(xiě)自己的jQuery插件簡(jiǎn)單實(shí)現(xiàn)代碼
- 如何編寫(xiě)jquery插件
相關(guān)文章
jQuery實(shí)現(xiàn)鍵盤(pán)回車搜索功能
本文通過(guò)代碼給大家介紹了jquery實(shí)現(xiàn)鍵盤(pán)回車搜索功能,前臺(tái)代碼和搜索按鈕實(shí)現(xiàn)代碼都給大家貼出了,需要的朋友參考下吧2017-07-07jQuery定義背景動(dòng)態(tài)切換效果的方法
這篇文章主要介紹了jQuery定義背景動(dòng)態(tài)切換效果的方法,實(shí)例分析了jQuery操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jquery html添加元素/刪除元素操作實(shí)例詳解
這篇文章主要介紹了jquery html添加元素/刪除元素操作,結(jié)合實(shí)例形式詳細(xì)分析了jquery html添加元素/刪除元素相關(guān)函數(shù)功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05關(guān)注jquery技巧提高jquery技能(前端開(kāi)發(fā)必學(xué))
本文給大家介紹jquery前端開(kāi)發(fā)關(guān)注jquery技巧提高jquery技能,對(duì)jquery前端開(kāi)發(fā)感興趣的朋友可以參考下本文2015-11-11Jquery 獲取表單text,areatext,radio,checkbox,select值的代碼
Jquery 獲取表單text,areatext,radio,checkbox,select值的實(shí)現(xiàn)代碼,學(xué)習(xí)jquery的朋友可以參考下。都是必須要了解的。2009-11-11jquery.post用法關(guān)于type設(shè)置問(wèn)題補(bǔ)充
當(dāng)使用ajax獲取data數(shù)據(jù)的時(shí)候,直接data.foo就可以得到。而較低版本的jquery就不行比如1.4之前,下面為大家介紹下jquery.post用法關(guān)于type設(shè)置問(wèn)題2014-01-01jQuery基于muipicker實(shí)現(xiàn)仿ios時(shí)間選擇
本文給大家分享的是把jQuery的muipicker插件修改實(shí)現(xiàn)仿IOS時(shí)間選擇特效,非常的不錯(cuò),有需要的小伙伴可以參考下。2016-02-02jQuery操作DOM_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了jQuery操作DOM,下面的DOM操作將圍繞上面的DOM樹(shù)進(jìn)行學(xué)習(xí)JQueryDOM操作,有興趣的可以了解一下2017-07-07