簡單的Jquery 外掛程式編寫

2021-06-07 15:14:53 字數 2324 閱讀 3174

jquery如此流行,各式各樣的jquery外掛程式也是滿天飛。你有沒有想過把自己的一些常用的js功能也寫成jquery外掛程式呢?如果你的答案是肯定的,那麼來吧!和我一起學寫jquery外掛程式吧!

先想好做個什麼功能

這是第一步,也是很重要的一步,鑑於咱們都是剛學習寫jquery外掛程式,所以,這個功能一定要簡單一些。不要想一口就吃個胖子,咱也吃不了。咱還是撿個瘦的下手吧。但是,這個功能也不能太無聊,如果無聊到幾乎沒用處,就算做好了也是扔到馬桶裡,不會持續更新,也便不會持續進步了。

我最終選擇的是:美化**,讓**的奇偶行顏色不同,然後滑鼠移到某行上,某行可以高亮顯示。功能簡單又實用,不錯,不錯。呵呵~~

不急著寫,先想想實現原理

還不急,先想想實現原理。必要的時候,先寫出簡單的實現的原型。

我的這個美化**的例子,實現原理倒是簡單,無非就是找到**的奇偶行,然後新增不同的class,活動行高亮顯示也很簡單,只要判斷mouseover事件,然後新增乙個class,mouseout的時候,再去掉這個class即可。

乙個通用的框架

在動手寫自己的jquery外掛程式之前,自然是先研究一下別人寫的外掛程式了。其實寫jquery也基本有乙個通用的框架。行,那咱也把這框架照搬過來吧。

(function

($)var

options = $.extend(defaults, options);

this

.each(

function

());

};})(jquery);

有了這個,咱就可以往裡面套東西了。

名號、引數和屬性

好不容易開始闖蕩江湖了,一定要有乙個響亮的名號才行,這樣走在江湖上,才能夠屌,夠威風。不信,你聽聽人家「中國牙防組」!所以,咱這裡一定要起個響亮的名號,一定要簡單、明了、夠權威。所以,決定了,就叫做「tableui」了!

引數和屬性也很簡單,無非就是三個class的名稱。就叫做:evenrowclass、oddrowclass和activerowclass吧。

所以,上面的框架,咱就把上半身給填上了。

(function

($)var

options = $.extend(defaults, options);

this

.each(

function

());

};})(jquery);

這裡重點說一下這一句:

varoptions = $.extend(defaults, options);

看上去很屌的一句,其實就是合併多個物件為乙個。這裡就是,如果你在呼叫的時候寫了新的引數,就用你新的引數,如果沒有寫,就用預設的引數。想進一步了解的朋友,可以參考jquery的官方文件:

開始下半身吧

ok,上半身填補完了,咱就可以填補下半身吧。無非就是找到基數行和偶數行(感謝jquery提供了類似tr:even這種寫法,使其及其簡單),然後新增上相應的class。然後再給所有的tr,繫結mouseover和mouseout事件即可。下半身**如下:

(function

($)var

options = $.extend(defaults, options);

this

.each(

function

());

$(thistable).find("tr"

).bind(

"mouseout"

,function

());

});};})(jquery);

最重要的一步!

也許有些朋友覺得這樣就算是完成了。但是切切相反,我們還有最重要的一步沒有完成,那就是一定要在外掛程式上方,寫上外掛程式的名稱、版本號、完成日期、作者,作者的****、出生日期、三圍……等等。因為只有這樣才能顯的這個外掛程式夠專業。/*

* tableui 0.1

* date: 2010-03-30

* 使用tableui可以方便地將**提示使用體驗。先提供的功能有奇偶行顏色交替,滑鼠移上高亮顯示*/(

function

($)var

options = $.extend(defaults, options);

this

.each(

function

());

$(thistable).find("tr"

).bind(

"mouseout"

,function

());

});};})(jquery); 學寫

jquery

外掛程式例項

簡單的jquery外掛程式編寫 table換行顏色變化

1 結構 function jquery 或 fn 或 function 等價於 document ready function function jquery 2 外掛程式的定義 fn.外掛程式名 function 函式中為外掛程式的各種屬性 引數 function jquery 3 在函式中邪外...

jquery外掛程式編寫

最近大家都玩什麼react node angular這些玩意去了 隨著瀏覽器的相容性 以及前端開發思想的進化 jquery逐漸被拋棄 現在自己也很少用了 純粹為了懷戀曾經的jquery.現在寫寫jquery外掛程式的寫法。沒事的時候避免老年痴呆,可以用來玩玩。寫法一 function window ...

jQuery 編寫外掛程式

jquery為開發外掛程式提供了兩個方法,分別是 1 類級別的外掛程式開發,即給jquery新增新的全域性函式,相當於給jquery類本身新增方法。2 物件級別的外掛程式開發,即給jquery物件新增方法。1 類級別的外掛程式開發 用的比較少 a.新增全域性函式 jquery.foo functio...