對於jquery之前一直用,也看到過別人寫的外掛程式,直到最近才想著學習怎麼寫自己的jquery外掛程式,今天看了網上的一些資料,發現其實很簡單的。
先看乙個簡單的jquery外掛程式的例子
使用的時候要先導入jquery外掛程式,比如$("p").bold().red(),這樣p標籤內容就會變為紅色粗體。
那麼,如何寫乙個正確的jquery的外掛程式呢?
首先,外掛程式的結構是這樣的
(function($))(jquery);
這種結構在j**ascript中叫做閉包,能夠不被編譯器執行。
然後,在閉包中寫外掛程式的功能,有兩種寫法
第一種:就是上面例子中的,這種適合寫有多個函式的外掛程式,例子中的bold和red就是定義的兩個外掛程式的名字。
第二種:
(function($));
};jquery.fn.red=function
());
}})(jquery);
可以看做是定義了兩個函式,分別是bold和red。
jquery.extend()的介紹和使用
注意,區別於上面的jquery.fn.extend()。
jquery.extend()有幾個過載方法
一、jquery.extend(desc,src1,src2,src3...)
用來把後面的引數src1、src2。。合併到desc中,比如
var src1=var src2=
var desc=
var result=jquery.extend(desc,src1,src2),
結果result=,同時desc也變為合併後的值,也就是說如果後面的引數和前面的引數有相同的屬性值,則後面的屬性會覆蓋前面的屬性。有時候我們不希望改變desc的值,則可以用{}代替desc,
jquery.extend({},src1,src2,...)
上述的extend方法原型中的dest引數是可以省略的,如果省略了,則該方法就只能有乙個src引數,而且是將該src合併到呼叫extend方法的物件中去,如:
$.extend(src)
該方法就是將src合併到jquery的全域性物件中去,如:
$.extend(});
二、jquery.extend(boolean,desc,src1,src2...)
第乙個boolean為布林值,意為是否深度覆蓋,後面的引數與上面的一致。所謂深度覆蓋,看下面的例子。
var result=jquery.extend(true,{},
},)
則結果為result=}
如果第乙個引數為false,則結果應該是這樣result=}
下面是乙個較完整的例子
寫jquery外掛程式的思路
不要覺得寫外掛程式很難,只是你把問題想的太複雜了,本文教你在10分鐘內搞定乙個簡單的外掛程式。其實就是把一些常用 實用 通用的功能封裝起來而以,簡單的來講就是把這些 放在乙個方法裡面,可以達到重複使用的效果,這樣就可以不需要每次要用此功能的時候都去重新寫一遍。1.先定義乙個外掛程式 function...
jquery怎麼寫,效率最高
最近看到一些不錯的文章,轉來坐一下筆記。其內容和一些新提供的方法還是很多有值得學習的地方。1.使用最新版本的jquery jquery的版本更新很快,你應該總是使用最新的版本。因為新版本會改進效能,還有很多新功能。下面就來看看,不同版本的jquery效能差異有多大。這裡是三條最常見的jquery選擇...
關於jQuery寫外掛程式及其演示
關於寫jquery外掛程式是很有必要的,這是前端學習當中必須經過的乙個過程 對於初次寫外掛程式先想清楚原理 function var options extend defaults,options this.each function jquery 這是乙個基礎的模板 其中的var options ...