封裝自己的jquery外掛程式

2021-09-26 09:52:00 字數 1782 閱讀 3854

第一步:要想封裝自己的jq外掛程式,要先了解jquery外掛程式執行機制。jquery使用無new的構造方式,直接$(』 ')進行構造,相當於new jquery()。看下面例子。

jquery將jquery.prototype賦值給jquery.prototype.init的prototype作為中轉站,最終return出了乙個jquery例項。將上述**寫在乙個自執行函式內(形成私有作用域,避免命名空間汙染),就構成了jquery的核心框架。

第二步: jquery的兩種使用方法 $.function() 和 $(「selector」);

1 $.function() 是在jquery原型物件設定的方法。我們可以通過 $.fn.extend()去擴充套件。例如:

$.fn.extend(

});$("input").getmax(1,2); //使用方法

2 ("s

elec

tor"

)是在j

quer

y物件上

設定的方

法。我們

可以通過

("selector")是在jquery物件上設定的方法。我們可以通過

("sele

ctor

")是在

jque

ry物件

上設定的

方法。我

們可以通

過.extend()去擴充套件。例如:

$.extend(

});$.print1("222") ; //使用方法

所以我們的擴充套件插架也有兩種方式。

第一種:在jquery物件上新增了乙個靜態方法。所以我們呼叫通過.ex

tend

()新增

的函式時

直接通過

.extend()新增的函式時直接通過

.exten

d()添

加的函式

時直接通

過符號呼叫(.my

func

tion

())而

不需要選

中dom

元素(.myfunction())而不需要選中dom元素(

.myfun

ctio

n())

而不需要

選中do

m元素(

(『selector』).myfunction())。

$.extend(

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

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

第二種方法:運用物件導向的思維方式,在jquery的原型上擴充套件方法。這就要用到 $.fn.extend({})這個方法了。

;(function($,window,document,undefined);

var options = $.extend(defaults, options); //將傳入引數和預設引數合併

var $this = $(this); //當然響應事件物件

$this.live(options.event, function (e) );

}})(jquery,window,document);

//呼叫外掛程式

$("#test").外掛程式名稱();

jQuery外掛程式的封裝

jquery外掛程式的封裝 fn上面新增乙個方法當需要給jquery物件 增加方法時,可以設定 fn下面新增乙個方法 這樣新增好以後,jquery物件就有這個方法了div div divs div div div p p p 當需要給jquery物件 增加方法時,可以設定 fn下面新增乙個方法 這樣...

封裝簡單的jquery外掛程式

1.定乙個閉包區域,防止外掛程式 汙染 閉包限定命名空間 function window.jquery 2.jquery.fn.extend object 擴充套件jquery 方法,製作外掛程式 閉包限定命名空間 function window.jquery 3.給外掛程式預設引數,實現 外掛程式...

自己製作jQuery外掛程式

寫自己的jquery外掛程式非常容易,按照下面的原則來做,可以讓其他人也容易地結合使用你的外掛程式 為你的外掛程式取乙個名字,在這個例子裡面我們叫它 foobar 建立乙個像這樣的檔案 jquery.yourpluginname js,比如我們建立乙個jquery.foobar.js 建立乙個或更多...