jQuery如此流行，各式各樣的jQuery插件也是滿天飛。你有沒(méi)有想過(guò)把自己的一些常用的JS功能也寫(xiě)成jQuery插件呢？如果你的答案是肯定的，那么來(lái)吧！和我一起學(xué)寫(xiě)jQuery插件吧！

嗨，美女，這是我寫(xiě)的一個(gè)jQuery插件！

　　很多公司的前端設(shè)計(jì)開(kāi)發(fā)人員都是女孩子，而這些女孩子很多JavaScript技能都不是很好。而前端開(kāi)發(fā)過(guò)程中，JavaScript技能又是必不可少的。所以，如果前端小MM正在為某個(gè)JavaScript效果發(fā)愁的時(shí)候，你瀟灑的過(guò)去，然后對(duì)她說(shuō)：“嗨，美女，用這個(gè)吧。這是我寫(xiě)的一個(gè)jQuery插件。”我想基本上你的人生大事就能很快解決。

先想好做個(gè)什么功能

　　這是第一步，也是很重要的一步，鑒于咱們都是剛學(xué)習(xí)寫(xiě)jQuery插件，所以，這個(gè)功能一定要簡(jiǎn)單一些。不要想一口就吃個(gè)胖子，咱也吃不了。咱還是撿個(gè)瘦的下手吧。但是，這個(gè)功能也不能太無(wú)聊，如果無(wú)聊到幾乎沒(méi)用處，就算做好了也是扔到馬桶里，不會(huì)持續(xù)更新，也便不會(huì)持續(xù)進(jìn)步了。

　　我最終選擇的是：美化表格，讓表格的奇偶行顏色不同，然后鼠標(biāo)移到某行上，某行可以高亮顯示。功能簡(jiǎn)單又實(shí)用，不錯(cuò)，不錯(cuò)。呵呵～～

不急著寫(xiě)，先想想實(shí)現(xiàn)原理

　　還不急，先想想實(shí)現(xiàn)原理。必要的時(shí)候，先寫(xiě)出簡(jiǎn)單的實(shí)現(xiàn)的原型。

　　我的這個(gè)美化表格的例子，實(shí)現(xiàn)原理倒是簡(jiǎn)單，無(wú)非就是找到表格的奇偶行，然后添加不同的class，活動(dòng)行高亮顯示也很簡(jiǎn)單，只要判斷mouseover事件，然后添加一個(gè)class，mouseout的時(shí)候，再去掉這個(gè)class即可。

一個(gè)通用的框架

　　在動(dòng)手寫(xiě)自己的jQuery插件之前，自然是先研究一下別人寫(xiě)的插件了。其實(shí)寫(xiě)jQuery也基本有一個(gè)通用的框架。行，那咱也把這框架照搬過(guò)來(lái)吧。

(function($){

    $.fn.yourName = function(options){

        //各種屬性、參數(shù)

        }

        var options = $.extend(defaults, options);

        this.each(function(){

        //插件實(shí)現(xiàn)代碼

        });

    };

})(jQuery);

it知識(shí)庫(kù)：跟我一起學(xué)寫(xiě)jQuery插件，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。