資訊專欄INFORMATION COLUMN
摘要：就是內(nèi)部作為全局函數(shù)的插件添加到內(nèi)核上去的。選擇器插件擴充自己喜歡的一些選擇器。在插件里的，經(jīng)過了一些封裝處理，就是表示對象。調(diào)用時，字體大小會運用插件里的默認值
jQuery插件的分類
jQuery插件有很多，有UI類，表單驗證，輸入類，特效類，Ajax類，滑動類，導(dǎo)航類，工具類，動畫類等等。
jQuery的插件主要分為三類：
1、封裝對象方法的插件：也就是基于某個DOM元素的jQuery對象，局部性 2、封裝全局函數(shù)的插件：將獨立的函數(shù)添加到j(luò)query的命名空間之下。jquery.trim()就是jquery內(nèi)部作為全局函數(shù)的插件添加到內(nèi)核上去的。 3、選擇器插件：擴充自己喜歡的一些選擇器。類似于.toggle()插件的基本要點
1. 插件的文件名推薦為 jquery.[插件名].js，例如jquery.validate.js 2. 所有的對象方法都應(yīng)當(dāng)附加到j(luò)Query.fn對象上，而所有的全局函數(shù)都應(yīng)當(dāng)附加到j(luò)Query對象本身上 3. 在插件內(nèi)部，this指向的是當(dāng)前通過選擇器獲取的jQuery對象，而不像一般的方法那樣，例如click()方法，內(nèi)部的this指向的是DOM元素 4. 可以通過this.each來遍歷所有元素 5. 所有的方法或函數(shù)插件，都應(yīng)當(dāng)以分號結(jié)尾，否則壓縮時可能出問題，有的為了更加穩(wěn)妥些，在插件的開始處加上一個分號 6. 插件應(yīng)該返回一個jQuery對象，這樣可以保證插件的可鏈?zhǔn)讲僮鳌３遣寮枰祷氐氖且恍┬枰@取的量，例如字符串或者數(shù)組等 7. 盡量利用閉包技巧歷來避免變量名的沖突 8. 引入的自定義插件必須在jQuery庫后面插件開發(fā)方式
jQuery插件開發(fā)方式主要有三種：
通過$.extend()來擴展jQuery 通過$.fn 向jQuery添加新的方法 通過$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建
通常我們使用第二種方法來進行簡單插件開發(fā)，而第一種方法是在jQuery命名空間上添加了一個靜態(tài)方法，并不能讓我們選中DOM元素，然后再調(diào)用該方法。而第三種并不常用，也較為復(fù)雜
插件的結(jié)構(gòu)在開始編寫jQuery插件時，我們有必要了解一下插件的基本結(jié)構(gòu)，所有的jQuery插件都聲明為jQuery.fn對象的方法：
jQuery.fn.showPlugin = function () {
//code here
};
我們使用如下代碼使用插件：
$("#plugin").showPlugin();
這里，我并沒有使用$，這是為了避免命名沖突，如果要用 $ 的話，可以像下面這樣把插件代碼封裝在一個自執(zhí)行的匿名函數(shù)中，然后傳入?yún)?shù)jQuery
(function($){
jQuery.fn.showPlugin = function () {
//code here
};
})(jQUery);
$.extend
.extend()允許你使用一個或多個對象擴展基準(zhǔn)對象，擴展的方式是依序?qū)⒂疫叺膶ο蠛喜⒌交鶞?zhǔn)對象（左邊第一個對象）。
;(function($){
$.extend({
"nav" : function () {
}
})
})(jQuery);
我們通過如下方法使用該全局方法：
$.nav();
前面（見：淺析jQuery整體框架與實現(xiàn)（上））我們說過，$.extend是全局性的，而$.fn.extend是局部性的，前面之所以要加分號是因為為了防止在此之前引入的js文件沒有加分號
$.fn.myPlugin = function() {
//在這里面,this指的是用jQuery選中的元素
//example :$("a"),則this=$("a")
this.css("color", "red");
}
this指代jQuery選擇器返回的集合。在插件里的this，經(jīng)過了一些封裝處理，this就是表示jQuery對象。而不需要再次使用$()進行包裝了
鏈?zhǔn)秸{(diào)用要讓插件實現(xiàn)鏈?zhǔn)秸{(diào)用只需要return該對象即可：
$.fn.myPlugin = function() {
this.css("color", "red");
return this.each(function() {
//對每個元素進行操作
$(this).append(" " + $(this).attr("href"));
}))
}
使用return this.each(function () {} 這樣就實現(xiàn)了我們的鏈?zhǔn)讲僮鳌?/p> 接收多個參數(shù)
$.fn.myPlugin = function(options) { //經(jīng)常用options表示有多個參數(shù)。
var defaults = {
"color": "red",
"fontSize": "12px"
};
var settings = $.extend(defaults, options);
return this.css({
"color": settings.color,
"fontSize": settings.fontSize
});
}
調(diào)用時，字體大小會運用插件里的默認值：
$("a").myPlugin({
"color": "#2C9929"
});
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85415.html
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計怎樣進行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計怎樣進行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計怎樣進行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...
摘要：前端工程師學(xué)習(xí)資料，快速查找面試題，經(jīng)典技術(shù)文章的總結(jié)，編程技巧，幫助學(xué)習(xí)者快速定位問題花點時間整理出一下前端工程師日常工作所需要的學(xué)習(xí)資料查找，幫助學(xué)習(xí)者快速掌握前端工程師開發(fā)的基本知識編程始于足下記住再牛逼的夢想也抵不住傻逼似的堅持蝴蝶 前端工程師學(xué)習(xí)資料，快速查找面試題，經(jīng)典技術(shù)文章的總結(jié)，編程技巧，幫助學(xué)習(xí)者快速定位問題花點時間整理出一下web前端工程師日常工作所需要的學(xué)習(xí)資料...
閱讀 2477·2021-11-22 15:35
閱讀 3767·2021-11-04 16:14
閱讀 2696·2021-10-20 13:47
閱讀 2507·2021-10-13 09:49
閱讀 2077·2019-08-30 14:09
閱讀 2376·2019-08-26 13:49
閱讀 887·2019-08-26 10:45
閱讀 2778·2019-08-23 17:54
