編寫jQuery外掛程式 實現返回頂部外掛程式

2022-07-30 03:48:13 字數 2197 閱讀 4399

國慶過去一周多了,作為it界的具有嚴重』工作狂『性質的宅人,居然還沒走出玩耍的心情,拖了程式猿的腳後跟了。最近工作不順,心情不佳,想吐槽下公司,想了還是厚道點,以彼之道還施彼身,覺得自己也和他們同流合汙了!就做個『沉默』的程式猿吧!(總有一天會猿球崛起)嘿嘿。

牢騷到底為止,好的心情才是重要的,本來猝死的機率就那麼大了,就不要再往上飆數字了。不快的心情留在公司,快樂的在家裡寫blog。

有一段時間沒有寫blog了(恍恍惚惚的過了這些天,買了幾本書,看了,字全認識,意思全沒看進去),也沒有乙個清晰的思路大綱,step by step的去寫一系列博文,就吧日常工作中的一些東東做下記錄,這幾篇想寫下有關前台的東東,好吧,就寫前台,這次就拍腦袋定了。

廢話怎麼這麼多了(還沒到更年期),看標題,編寫jquery外掛程式,在jquery的官網上面外掛程式已經有很多了,最常見表單驗證-validation等;現在比較完善、流行的的jquery ui。在使用這些不錯的外掛程式的時候不要忘記向編寫它們的大牛們致敬。

前些天看了篇博文,就是說不會編寫jquery外掛程式的人不要說自己會用jquery;表示灰常贊同;外掛程式就是對一系列方法或是函式的封裝,以便以後更好的重用,也便於後期的維護、提高開發效率。那麼就讓我們做乙個會編寫jquery外掛程式會使用jquery的程式猿吧。

在開始編寫之前先介紹點基本的知識吧(一是以前總是不注重理論直接導致某次面試深受其害,二是增加點本博文的內容,不至於太沒深度了(不要說我太自私、太沽名釣譽啊,嘿嘿)),那就摘抄+自我理解的理論吧。

jquery的外掛程式的3種型別:

1.封裝物件方法的外掛程式

這種外掛程式是將物件方法封裝起來,用於對通過選擇器獲取的jquery物件進行操作,大概有95%以上的外掛程式都是封裝物件方法的外掛程式。(文字描述總是那麼讓人罵娘(河蟹掉))就是通過 $.fn.extend()方法來實現。

例如:$.fn.extend(,//用,號隔開,可以定義一組外掛程式

"myextend2":function())(jquery);//這裡jquery作為匿名函式的實參

ok,那就來寫第一種jquery外掛程式--封裝jquery物件方法的外掛程式;這個外掛程式的方法名:totop();

;(function($))(jquery);

實現思路:比如是乙個div標籤,位置在右側底部,開始時隱藏的,當滾動條滾動到距離頂部一定高度時(比如500px),div標籤顯示,點選此div標籤滾動條距離頂部的位置為0,div標籤就隱藏。

ok,開寫:

"totop":function(options) else

});//新增置頂事件

$(this).click(function () );

return this;//此句**是實現可鏈結性

相應的css**如下:

.topstyle

.top

.top:hover

ok,在html內新增

$(function(),options);

this.css('right',options.right+"px");//右側的距離

this.css('bottom', options.bottom);//底部的距離

this.css('visibility', 'hidden');

$(this).addclass('top topstyle');

$this=$(this);

//返回頂部

$(window).scroll(function () else

});$(this).click(function () ); return this; }

相應css**如下:

.topstyle

.top

.top:hover

呼叫:$("#divtotop").totop();//$("#divtotop").totop()直接使用預設值

哇,一看時間已經10點多了;我緩衝的電影已經ok了;

ps:上次的**在ie和火狐下面存在相容性問題,現已修改!!

順便整理了一下,把上述**做了乙個demo,並新寫了一滾動頂部固定的擴充套件外掛程式;共同學習;

上面兩個擴充套件方法中都用到了position:fixed;(ie6及更早瀏覽器不支援position屬性的fixed引數值)此屬性使元素不會隨著滾動條移動。

jquery外掛程式編寫

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

jQuery 編寫外掛程式

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

jQuery 編寫外掛程式

編寫乙個jquery外掛程式的原則 給 fn繫結函式,實現外掛程式的 邏輯 外掛程式函式最後要return this 以支援鏈式呼叫 外掛程式函式要有預設值,繫結在 fn.defaults上 使用者在呼叫時可傳入設定值以便覆蓋預設值。一 fn 給jquery物件繫結乙個新方法是通過擴充套件 fn物件...