第一步:要想封裝自己的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 建立乙個或更多...