當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

【原】jQuery编写插件

發(fā)布時(shí)間：2023/12/20 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了【原】jQuery编写插件小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

分享一下編寫設(shè)置和獲取顏色的插件，首先我將插件的名字命名為jquery.color.js。該插件用來(lái)實(shí)現(xiàn)以下兩個(gè)功能1.設(shè)置元素的顏色。2.獲取元素的顏色。

先在搭建好如下編寫插件的框架：

;(function($){//這里編寫插件代碼 })(jQuery);

我這里采用jQuery.fn.extend().這種方法來(lái)編寫，代碼如下：

;(function($){$.fn.extend({"color":function(value){//這里寫插件代碼 }}); })(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)編寫插件的整個(gè)過(guò)程

轉(zhuǎn)載于:https://www.cnblogs.com/wswq/p/6262557.html

總結(jié)

以上是生活随笔為你收集整理的【原】jQuery编写插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。