你還不會建立jQuery外掛程式 ?

2021-09-04 22:12:34 字數 1870 閱讀 9751

如何建立乙個jquery外掛程式

為什麼要建立jquery外掛程式 ? 因為這樣**可以復用。

我們有這樣乙個頁面,頁面上面有如下的文字(看原始碼),我們想要的效果是,當滑鼠移到鏈結的時候,用乙個浮動的div來顯示a標籤的title內容.

這是通過js來完成的。假設有乙個方法tooltip(), 你只需要呼叫這個方法就能達成你的願望,就像這樣:

$('a.tooltip').tooltip();  

假設我們把外掛程式命名為tooltip,則需要定義乙個jquery.tooltip.js檔案。這樣命名只是為了說明這是jquery的外掛程式,實際上你可以隨便命名這個檔名。下面來開始寫我們的外掛程式:

(function($))(jquery);

外掛程式的**必須包含在這個格式裡。這裡要注意,要確保你沒有使用別的js庫,否則這個美元符$,會發生衝突,如果要避免產生這種衝突,你最好在外掛程式裡都使用jquery字元來代替美元符。

我們首先來定義外掛程式函式:

$.fn.tooltip = function(options)

然後設定預設的引數:

var  

defaults = ,

然後再用setting變數來接收使用者自定義的引數,使用extend方法來merge這些引數。

settings = $.extend({}, defaults, options);

現在要開始寫方法了,使用者如果使用這個外掛程式的時候,傳入的jquery dom物件可能不只是乙個元素,我們需要給每個class為tooltip的a標籤都繫結好這個事件,那麼就需要迭代了,這裡jquery提供了each方法:

this.each(function()

這裡為什麼要用$this呢? 這是為了提醒自己,正在和jquery物件打交道。

然後寫滑鼠事件等等,來看最後的**:

(function($), 

settings = $.extend({}, defaults, options); 

this.each(function() ) 

.fadein(350); 

if(settings.rounded)  

}, function() );   } 

$this.mousemove(function(e) ); 

}); 

}); 

// returns the jquery object to allow for chainability. 

return this;  } 

})(jquery); 

總結:1. 這裡有個小技巧,假如要定義多個變數:

var a = {};

var b = {};

var c = {};

可以這麼寫:

vara = {},

b = {},

c = {};

2.外掛程式**裡,迴圈內的this, 迴圈外的this,迴圈內的$(this)的關係, 實際上是jquery物件和dom物件的關係。

頁面上呼叫外掛程式方法,外掛程式方法內部的each外的this,則是jquery物件,這個物件是個集合物件,也就是$('a.tooltip')這個物件,頁面上共有2個class為tooltip的a標籤。

jquery物件的$方法,返回的是jquery集合物件,裡面的元素,如果你用get方法去呼叫得到的是dom,你用eq方法呼叫得到的是jquery物件,比如:

$('a').eq(0)得到的是jquery物件

$('a').get(0)得到的是dom物件,

直接$('a')[0]得到的是dom物件,

而jquery的each方法,我認為是迭代的是dom物件,而不是jquery物件,所以在each裡面this是dom物件,而需要$(this)來得到jquery物件來進行操作 。把這個關係搞清楚就行了。 

你還不會Linux下安裝nginx?

一 安裝nginx前的準備 1.1 請確認gcc g 開發類庫是否裝好。yum y install gcc automake autoconf libtool make 安裝make yum install gcc gcc c 安裝g 用yum方式安裝openssl pcre zlib yum y ...

你還不會ES的CUD嗎?

近端時間在搬磚過程中對es進行了操作,但是對es查詢文件不熟悉,所以這兩周都在研究es,簡略看了 elasticsearch權威指南 摸摸魚又是一天。es是一款基於lucene的實時分布式搜尋和分析引擎,今天咱不聊其應用場景,聊一下es索引增刪改。環境 centos 7,elasticsearch6...

建立jQuery外掛程式

全域性 類 方法 開發頻率低 物件 例項 方法 開發頻率高 選擇器 外掛程式 fun 名字空間 extend fn.外掛程式 fun fn.名字空間 fn.extend 方法名 function 方法名 function var newobject extend 合併多個物件 外掛程式 全域性 類 ...