分享jQuery插件的學(xué)習(xí)筆記
插件(Plugin)也成為 jQuery 擴(kuò)展(Extension),是一種遵循一定規(guī)范的應(yīng)用程序接口編寫出來(lái)的程序。目前 jQuery 插件已超過(guò)幾千種,由來(lái)自世界各地的開(kāi)發(fā)者共同編寫、驗(yàn)證和完善。而對(duì)于jQuery開(kāi)發(fā)者而言,直接使用這些插件將快速穩(wěn)定架構(gòu)系統(tǒng),節(jié)約項(xiàng)目成本。
一. 插件概述
插件是以 jQuery 的核心代碼為基礎(chǔ),編寫出復(fù)合一定規(guī)范的應(yīng)用程序。也就是說(shuō),插件也是 jQuery 代碼,通過(guò) js 文件引入的方式植入即可。
插件的種類很多,主要大致可以分為:UI 類、表單及驗(yàn)證類、輸入類、特效類、Ajax類、滑動(dòng)類、圖形圖像類、導(dǎo)航類、綜合工具類、動(dòng)畫類等等。
引入插件是需要一定步驟的,基本如下:
- 1、必須先引入 jquery.js 文件,而且在所有插件之前引入;
- 2、引入插件;
- 3、引入插件的周邊,比如皮膚、中文包等。
比如最常用到的表單驗(yàn)證插件: validate ,除了最基本的插件文件 jquery.validate.min.js 之外,還有著 messages_zh.js 等等各國(guó)的語(yǔ)言包可以供你使用。
如何使用該插件在這里就不進(jìn)行描述了,可以去看看慕課網(wǎng)上的視頻 jQuery插件——Validation Plugin ,里面詳細(xì)的描述了這個(gè)插件的各種配置項(xiàng),以及擴(kuò)展。
觸類旁通,一個(gè)優(yōu)秀的插件,詳細(xì)的說(shuō)明文檔必不可少,詳細(xì)的看說(shuō)明文檔能,并且在本地進(jìn)行測(cè)試能讓你快速的入門各種插件的使用。
還有各種各樣的別人編寫好的插件可以供你使用:比如管理cookie的插件–cookie等等。
插件可以去jQuery官網(wǎng)的插件模塊進(jìn)行查找 The jQuery Plugin Registry
二. 自定義插件
前面我們使用了別人提供好的插件,使用起來(lái)非常的方便。如果市面上找不到自己滿意的插件,并且想自己封裝一個(gè)插件提供給別人使用。那么就需要自己編寫一個(gè) jQuery 插件了。
1、插件種類
按照功能分類,插件的形式可以分為一下三類:
- 封裝對(duì)象方法的插件;(也就是基于某個(gè) DOM 元素的 jQuery 對(duì)象,局部性,使用最多)
- 封裝全局函數(shù)的插件;(全局性的封裝)
- 選擇器插件。(類似與.find(),例如: color(red) 來(lái)選擇所有的紅色元素之類)
2、插件的基本要點(diǎn)
主要用以以解決各種因?yàn)椴寮?dǎo)致的沖突、錯(cuò)誤等問(wèn)題,包括如下:
- 插件名推薦使用 jQuery.[插件名].js,以免和其他 js 文件或者其他庫(kù)相沖突(可以使用alert( $.[插件名] )驗(yàn)證是否存在該全局方法);
- 局部對(duì)象附加 jQuery.fn 對(duì)象上,全局函數(shù)附加在 jQuery對(duì)象本身上(可以使用alert( $(selector).[插件名] )驗(yàn)證是否存在該局部方法);
- 插件內(nèi)部,this 指向是當(dāng)前的局部對(duì)象(通過(guò)選擇器獲取的jQuery對(duì)象);
- 可以通過(guò) this.each 來(lái)遍歷所有元素;
- 所有的方法或插件,必須用分號(hào)結(jié)尾,避免出現(xiàn)問(wèn)題(為了更穩(wěn)妥,可在插件頭部先加上一個(gè)分號(hào));
- 插件應(yīng)該返回的是 jQuery 對(duì)象,以保證可鏈?zhǔn)讲僮鳎?/strong>
- 避免插件內(nèi)部使用$,如果要使用,使用閉包把傳遞 jQuery 進(jìn)去,使插件內(nèi)部繼續(xù)使用$作為jQuery的別名。
;(function($){//這里將$符作為匿名函數(shù)的形參
/*在此處編寫代碼,可使用$作為jQuery的縮寫別名*/
})(jQuery);//這里將jQuery作為實(shí)參傳遞給匿名函數(shù)了
3、編寫一個(gè)插件
假設(shè)我們的插件需求是:實(shí)現(xiàn)一個(gè)下拉菜單,在移入該元素時(shí),把對(duì)應(yīng)的下拉列表展現(xiàn)出來(lái),移出時(shí)收回。并且可以設(shè)置其展開(kāi)時(shí)的文字顏色。
根據(jù)慣例,我們?cè)诰帉懖寮r(shí),可以對(duì)于html結(jié)構(gòu)有所約束?,F(xiàn)在假設(shè)我們的頁(yè)面上有如下HTML結(jié)構(gòu):
<ul class="list"> <li>導(dǎo)航列表1 <ul class="nav"> <li>導(dǎo)航列表1</li> <li>導(dǎo)航列表2</li> <li>導(dǎo)航列表3</li> <li>導(dǎo)航列表4</li> <li>導(dǎo)航列表5</li> <li>導(dǎo)航列表6</li> </ul> </li> <li>導(dǎo)航列表2 <ul class="nav"> <li>導(dǎo)航列表1</li> <li>導(dǎo)航列表2</li> <li>導(dǎo)航列表3</li> <li>導(dǎo)航列表4</li> <li>導(dǎo)航列表5</li> <li>導(dǎo)航列表6</li> </ul> </li> </ul> <!-- 默認(rèn)已經(jīng)引入jquery -->
在這里,我們就對(duì)我們的插件實(shí)現(xiàn)效果有了第一個(gè)要求,必須在 對(duì)于需要hover展現(xiàn)的元素 內(nèi)部下面建立 ul 列表,且 className 必須為 nav 。(插件內(nèi)部都是根據(jù)該條件來(lái)做文章)
下面就可以開(kāi)始編寫我們的插件了。保存為 jQuery.nav.js ,(符合上面所說(shuō)的要求,默認(rèn)已經(jīng)導(dǎo)入)
;(function($){
$.extend({ //插件定義在全局方法上
"nav" : function (color){//傳參,這里只是拋磚引玉,在您編寫的時(shí)候,參數(shù)選項(xiàng)可以更加豐富,例如傳入json對(duì)象等等
$('.nav').css({//對(duì)展開(kāi)的下拉列表設(shè)置樣式,此處在下面進(jìn)行詳細(xì)說(shuō)明
"list-style" : "none",
"margin" : 0,
"padding" : 0,
"display" : "none",
"color":color//由用戶控制hover時(shí),展現(xiàn)出來(lái)列表的文字顏色
});
$('.nav').parent().hover(//這里用到了.nav的父節(jié)點(diǎn)(就是hover到的元素)
//因?yàn)槲覀冎荒茉诓寮蟮姆秶鷥?nèi)進(jìn)行設(shè)定,若是使用了外部的選擇器,就違背了這個(gè)原則
function (){
$(this).find(".nav").stop().slideDown("normal");//注意我們?cè)谶@里使用了jquery的動(dòng)畫方法
},function (){
$(this).find(".nav").stop().slideUp("normal");//注意stop()的使用,不然會(huì)有類似手風(fēng)琴效果的出現(xiàn),但那并不是我們需要的
});
}
});
})(jQuery);
注意:這里使用css方法只是為了方便,在真實(shí)插件編寫過(guò)程中,若存在如此大量的css樣式編寫時(shí),推薦在外部定義css樣式,例如可改寫為:
插件依賴的css,需和插件一起導(dǎo)入html中
.hover{/*插件必須樣式*/
list-style: none;
margin:0;
padding: 0;
display: none;
}
在插件內(nèi)部修改。
$('.nav').addClass("hover");//將CSS與jQuery分離開(kāi)來(lái)
$('.nav').css("color",color);//存在用戶設(shè)置時(shí)啟用,不存在就不用了(進(jìn)行判斷)
剛剛說(shuō)的都是插件的js文件,最后要起到效果,別忘了頁(yè)面的js中加上那么一句話(當(dāng)前插件定義在全局方法上)
$(function (){
$.nav("#999");//調(diào)用插件實(shí)現(xiàn)的全局方法,并且設(shè)置其展現(xiàn)背景顏色為#999。
});
就這樣,我們的全局插件就編寫,而且調(diào)用完成了,在你的頁(yè)面刷新看看,是不是已經(jīng)有了效果呢?
但是,因?yàn)槲覀兊姆椒ǘx在全局上,現(xiàn)在只要頁(yè)面中出現(xiàn)了我們插件所規(guī)定的結(jié)構(gòu),就會(huì)存在hover展現(xiàn)效果,但是有時(shí)我們往往想要的不是這樣,我們希望它在局部,在我指定的元素調(diào)用。所以我們需要對(duì)其進(jìn)行一些改造,讓其變成局部方法,其實(shí)也很簡(jiǎn)單:
;(function($){
$.fn.extend({//定義為局部方法
"nav" : function (color){
$(this).find('.nav').addClass('hover');//上面已經(jīng)說(shuō)過(guò)了,此時(shí)this指向調(diào)用該方法的元素
$(this).find('.nav').css("color",color);//在當(dāng)前元素下,增加了一次find篩選,實(shí)現(xiàn)在對(duì)應(yīng)的元素中執(zhí)行。
$(this).find('.nav').parent().hover(
function (){
$(this).find(".nav").stop().slideDown("normal");
},function (){
$(this).find(".nav").stop().slideUp("normal");
});
return this;//返回當(dāng)前的對(duì)象
}
});
})(jQuery);
我們?nèi)ニ⑿乱幌聻g覽器。你會(huì)發(fā)現(xiàn),咦,怎么沒(méi)效果? 當(dāng)然因?yàn)樵瓉?lái)的代碼是直接在全局調(diào)用的,現(xiàn)在變成局部方法了,顯然就不能這樣做了,需要做一點(diǎn)改變:
我這里就不貼html代碼了,但是希望您在實(shí)踐時(shí)能把上面的html代碼在其下復(fù)制幾份,以達(dá)到思考其實(shí)現(xiàn)的效果
$(function (){//這里的eq(0)代表只對(duì)第一份起到效果,復(fù)制后的沒(méi)有效果。
//(你可以把上面的find篩選刪除之后再試試,您會(huì)發(fā)現(xiàn),他又對(duì)余下的幾份起效果了)
$(".list").eq(0).nav("red");//調(diào)用局部方法
});
現(xiàn)在回過(guò)頭再把我們寫的插件代碼對(duì)應(yīng)上面寫的 插件編寫的要點(diǎn) ,思考一下,我們還有哪些沒(méi)有做到?就會(huì)發(fā)現(xiàn),基本已經(jīng)能對(duì)應(yīng)上了?,F(xiàn)在我們就完成了一個(gè)下拉菜單的插件。
其實(shí)編寫插件并不難,最主要的是在我們編寫插件的時(shí)候,一定要時(shí)刻注意這樣的要點(diǎn),每一個(gè)細(xì)節(jié)都遵循在大家實(shí)踐過(guò)程中總結(jié)出來(lái)的最佳實(shí)現(xiàn),才能自定義實(shí)現(xiàn)一個(gè)良好的插件。
代碼首先是寫個(gè)人看的,再然后才是給機(jī)器看的。
- 新手學(xué)習(xí)JQuery基本操作和使用案例解析
- jQuery學(xué)習(xí)之DOM節(jié)點(diǎn)的插入方法總結(jié)
- jQuery學(xué)習(xí)筆記之入門
- 想學(xué)習(xí)javascript JS和jQuery哪個(gè)重要 先學(xué)哪個(gè)
- JQuery學(xué)習(xí)總結(jié)【二】
- JQuery學(xué)習(xí)總結(jié)【一】
- jQuery學(xué)習(xí)筆記——jqGrid的使用記錄(實(shí)現(xiàn)分頁(yè)、搜索功能)
- jQuery學(xué)習(xí)心得總結(jié)(必看篇)
- jQuery學(xué)習(xí)筆記之Ajax用法實(shí)例詳解
- jquery動(dòng)畫效果學(xué)習(xí)筆記(8種效果)
- JQuery中使用.each()遍歷元素學(xué)習(xí)筆記
- jQuery從新手到高手的超詳細(xì)學(xué)習(xí)筆記(代碼示例)
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片預(yù)覽大圖效果
我們可以借助jQuery來(lái)實(shí)現(xiàn)一些很酷炫的效果,本篇為大家介紹下通過(guò)jQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)經(jīng)過(guò)了圖片數(shù),圖片會(huì)放大進(jìn)行預(yù)覽大圖,需要的朋友可以參考下2014-04-04
jQuery實(shí)現(xiàn)獲取h1-h6標(biāo)題元素值的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取h1-h6標(biāo)題元素值的方法,涉及$(":header")選擇器操作h1-h6元素及事件響應(yīng)相關(guān)技巧,需要的朋友可以參考下2017-03-03
jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果,基于jquery實(shí)現(xiàn)頁(yè)面圖文定時(shí)滾動(dòng)效果,涉及jquery頁(yè)面元素的遍歷與樣式的動(dòng)態(tài)操作技巧,是一款經(jīng)典的jquery滾動(dòng)特效,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jQuery中outerWidth()方法用法實(shí)例
這篇文章主要介紹了jQuery中outerWidth()方法用法,實(shí)例分析了outerWidth()方法的功能、定義及獲取第一個(gè)匹配元素外部寬度的使用技巧,需要的朋友可以參考下2015-01-01
jquery之a(chǎn)jaxfileupload異步上傳插件(附工程代碼)
在處理文件上傳時(shí)需要使用到文件的異步上傳,這里使用Jquery Ajax File Uploader這個(gè)組件,服務(wù)器端采用struts2來(lái)處理文件上傳2013-04-04

