jQuery編寫設(shè)置和獲取顏色的插件
分享一下編寫設(shè)置和獲取顏色的插件,首先我將插件的名字命名為jquery.color.js。
該插件用來實現(xiàn)以下兩個功能
- 設(shè)置元素的顏色。
- 獲取元素的顏色。
先在搭建好如下編寫插件的框架:
;(function($){
//這里編寫插件代碼
})(jQuery);
我這里采用jQuery.fn.extend().這種方法來編寫,代碼如下:
;(function($){
$.fn.extend({
"color":function(value){
//這里寫插件代碼
}
});
})(jQuery);
這個方法可里面有一個value.參數(shù),當(dāng)給color().這個傳入了參數(shù)那么就用來設(shè)置color.值,不傳參數(shù)就是獲取color().值。代碼如下:
;(function($){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css('color');
}
else{
return this.css('color',value);
}
}
});
})(jQuery);
最后我們來測試一下:
<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>
測試結(jié)果如下圖:


OK!測試沒問題,全部完成。做這篇分享只是為了分享一下如何實現(xiàn)編寫插件的整個過程
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
關(guān)注jquery技巧提高jquery技能(前端開發(fā)必學(xué))
本文給大家介紹jquery前端開發(fā)關(guān)注jquery技巧提高jquery技能,對jquery前端開發(fā)感興趣的朋友可以參考下本文2015-11-11
Jquery 獲取表單text,areatext,radio,checkbox,select值的代碼
Jquery 獲取表單text,areatext,radio,checkbox,select值的實現(xiàn)代碼,學(xué)習(xí)jquery的朋友可以參考下。都是必須要了解的。2009-11-11
jquery.post用法關(guān)于type設(shè)置問題補(bǔ)充
當(dāng)使用ajax獲取data數(shù)據(jù)的時候,直接data.foo就可以得到。而較低版本的jquery就不行比如1.4之前,下面為大家介紹下jquery.post用法關(guān)于type設(shè)置問題2014-01-01
jQuery基于muipicker實現(xiàn)仿ios時間選擇
本文給大家分享的是把jQuery的muipicker插件修改實現(xiàn)仿IOS時間選擇特效,非常的不錯,有需要的小伙伴可以參考下。2016-02-02
jQuery操作DOM_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了jQuery操作DOM,下面的DOM操作將圍繞上面的DOM樹進(jìn)行學(xué)習(xí)JQueryDOM操作,有興趣的可以了解一下2017-07-07

