jQuery外掛程式開發一

2021-07-25 16:46:05 字數 3077 閱讀 3627

jquery外掛程式開發方式主要有三種:

1、通過$.extend()來擴充套件jquery

2、通過$.fn 向jquery新增新的方法

3、通過$.widget()應用jquery ui的部件工廠方式建立

通常我們使用第二種方法來進行簡單外掛程式開發,說簡單是相對於第三種方式。第三種方式是用來開發更高階jquery部件的,

而第一種方式又太簡單,僅僅是在jquery命名空間或者理解成jquery身上新增了乙個靜態方法而以。

所以我們呼叫通過.extend()新增的函式時直接通過符號呼叫($.myfunction())

而不需要選中dom元素($(「#example」).myfunction())。

請看下面的例子。

$.extend(

})$.sayhello(); //呼叫

$.sayhello('csdn'); //帶參呼叫

上面**中,通過.extend()向jquery新增了乙個sayhello函式,然後通過直接呼叫。到此你可以認為我們

已經完成了乙個簡單的jquery外掛程式了。但如你所見,這種方式用來定義一些輔助方法是比較方便的。

比如乙個自定義的console,輸出特定格式的資訊,定義一次後可以通過jquery在程式中任何需要的地方呼叫它.

$.extend(

})$.log('initializing...'); //呼叫

但這種方式無法利用jquery強大的選擇器帶來的便利,要處理dom元素以及將外掛程式更好地運用於所選擇的元素身上,

還是需要使用第二種開發方式。你所見到或使用的外掛程式也大多是通過此種方式開發。

外掛程式開發

下面我們就來看第二種方式的jquery外掛程式開發。

基本方法

先看一下它的基本格式:

$.fn.pluginname = function

()

基本上就是往$.fn上面新增乙個方法,名字是我們的外掛程式名稱。然後我們的外掛程式**在這個方法裡面展開。

比如我們將頁面上所有p標籤顏色轉成紅色,則可以這樣寫這個外掛程式:

title="one">我是第一行p>

li>

title="two">我是第二行p>

li>

title="three">我是第三行p>

li>

我是span標籤不是p標籤哦 span>

li>

ul>

$.fn.myplugin = function

() $(function

() )

執行結果

下面進一步,在外掛程式**裡處理每個具體的元素,而不是對乙個集合進行處理,這樣我們就可以針對每個元素進行相應操作。

我們已經知道this指代jquery選擇器返回的集合,那麼通過呼叫jquery的.each()方法就可以處理合集中的每個元素了,但此刻

要注意的是,在each方法內部,this指帶的是普通的dom元素了,如果需要呼叫jquery的方法那就需要用$來重新包裝一下。

比如現在我們要在每個p標籤後面顯示title屬性的值,首先通過each遍歷所有p標籤,然後獲取title屬性的值再加到文字後面。

更改後我們的外掛程式**為:

$.fn.myplugin = function

() )

}

執行結果:

下面開始jquery外掛程式編寫中乙個重要的部分,引數的接收。

支援鏈式呼叫

我們都知道jquery乙個非常優雅的特性是支援鏈式呼叫,選擇好dom元素後可以不斷地呼叫其他方法。

要讓外掛程式不打破這種鏈式呼叫,只需return一下即可。

$.fn.myplugin = function

() )

}

讓外掛程式接收引數

我們不想讓其只變成紅色,讓外掛程式接收引數可以自定義顏色和其他屬性

$.fn.myplugin = function

(options) ;

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

return

this.css( );

}

現在,我們呼叫的時候指定顏色,字型大小未指定,會運用外掛程式裡的預設值15px。

$(

'p').myplugin( );

執行結果

同時指定顏色與字型大小:

保護好預設引數

注意到上面**呼叫extend時會將defaults的值改變,這樣不好,因為它作為外掛程式因有的一些東西應該維持原樣,

另外就是如果你在後續**中還要使用這些預設值的話,當你再次訪問它時它已經被使用者傳進來的引數更改了。

乙個好的做法是將乙個新的空物件做為$.extend的第乙個引數,defaults和使用者傳遞的引數物件緊隨其後,

這樣做的好處是所有值被合併到這個空物件上,保護了外掛程式裡面的預設值。

$.fn.myplugin = function

(options) ;

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

return

this.css( );

}

jQuery 外掛程式開發

一 類級別的外掛程式開發 即給jquery新增新的全域性函式,相當於給jquery類本身新增方法,jquery的全域性函式就是屬於jquery命名空間的函式。1 新增全域性函式 方法一 jquery.onetest function jquery.twotest function 方法二 jquer...

jquery 外掛程式開發

自定義主要通過兩種方式實現 extend fn.extend 呼叫的方法分別是 aa this aa 注意 建立函式時不要放在 function 中,呼叫時候要放在事件裡面 this click function jquery.extend 函式詳解 jquery的extend擴充套件方法 jque...

jquery 外掛程式開發

jquery外掛程式開發一般通過兩種框架方式 一種是在jquery物件上直接定義新成員,形成外掛程式 另一種是封裝完整的外掛程式 然後將jqeury作為引數自身呼叫,達到給jquery物件擴充套件功能目的,形成外掛程式。其實兩種方式都是給jqeury物件擴充套件成員來實現外掛程式功能的,所以本質上功...