Jquery插件編寫(xiě)簡(jiǎn)明教程
1.jQuery插件文件名推薦命名為 jquery.[插件名].js 以免和其他javascript庫(kù)插件混淆。例如命名為jquery.color.js
2.所有的對(duì)象方法名都應(yīng)當(dāng)附加到j(luò)Query.fn對(duì)象上而所有的全局函數(shù)都應(yīng)當(dāng)附加到j(luò)Query對(duì)象本身上。
3.在插件內(nèi)部,this指向的是當(dāng)前通過(guò)選擇器獲取的jquery對(duì)象,而不像一般方法哪樣,例如chick()方法,內(nèi)部的this指向的dom元素
4.可以通過(guò)this.each來(lái)遍歷所有元素
5.所有的方法或函數(shù)插件,都應(yīng)當(dāng)以分號(hào)結(jié)尾,否者壓縮的時(shí)候可能出現(xiàn)問(wèn)題,為了更穩(wěn)妥一些,甚至可以在插件頭部先加上一個(gè)分號(hào),
以免他人不規(guī)范的代碼給查詢帶來(lái)影響。
6.插件應(yīng)該返回一個(gè)jquery對(duì)象,以保證插件可鏈?zhǔn)讲僮?。除非插件需要返回的是一些需要回去的量,例如字符串或者?shù)組
7.避免在插件內(nèi)部使用$作為jquery對(duì)象的別名,而應(yīng)使完整的jquery來(lái)表示,這樣可以避免沖突。當(dāng)然,也可以利用閉包這種技巧來(lái)回避
這兒?jiǎn)栴},使插件內(nèi)部繼續(xù)使用$作為jquery的別名。
*/
//;為了更好的兼容性,開(kāi)始有個(gè)分號(hào)
;(function($){//此處將$作為匿名函數(shù)的形參
//$.fn.extend 擴(kuò)展插件
$.fn.extend({
"color":function(value){//color 自己寫(xiě)的插件方法名
//jQuery提供了css方法可以直接寫(xiě)成this.css("屬性","值");
return this.css("color",value);
}
});
})(jQuery);//這里將jquery作為實(shí)參傳遞給匿名函數(shù)
function red(){
alert($("#div").color()+"證明插件可用");
alert($("#div").color("red")+"證明插件返回了一個(gè)Jquery對(duì)象");
$("#div").color("red");
}
在HTML使用插件示例:
<div id="div" onclick="red()">dddddddddddddddd</div>
</body>
- jQuery編寫(xiě)設(shè)置和獲取顏色的插件
- 基于jquery插件編寫(xiě)countdown計(jì)時(shí)器
- jQuery插件編寫(xiě)步驟詳解
- 基于jquery編寫(xiě)的放大鏡插件
- 基于jquery編寫(xiě)分頁(yè)插件
- jQuery彈簧插件編寫(xiě)基礎(chǔ)之“又見(jiàn)彈窗”
- 編寫(xiě)自己的jQuery提示框(Tip)插件
- 編寫(xiě)簡(jiǎn)單的jQuery提示插件
- 基于編寫(xiě)jQuery的無(wú)縫滾動(dòng)插件
- 編寫(xiě)自己的jQuery插件簡(jiǎn)單實(shí)現(xiàn)代碼
- 如何編寫(xiě)jquery插件
相關(guān)文章
jQuery ajax提交Form表單實(shí)例(附demo源碼)
這篇文章主要介紹了jQuery ajax提交Form表單的方法,結(jié)合實(shí)例分析了jQuery ajax操作實(shí)現(xiàn)表單提交的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
jquery實(shí)現(xiàn)簡(jiǎn)單的swiper輪播預(yù)覽原圖
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的swiper輪播預(yù)覽原圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
基于Datatables跳轉(zhuǎn)到指定頁(yè)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇基于Datatables跳轉(zhuǎn)到指定頁(yè)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
jQuery實(shí)現(xiàn)定時(shí)隱藏對(duì)話框的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)定時(shí)隱藏對(duì)話框的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery定時(shí)隱藏對(duì)話框的相關(guān)函數(shù)、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2018-02-02
詳解layui中的樹(shù)形關(guān)于取值傳值問(wèn)題
本篇文章主要介紹了詳解layui中的樹(shù)形關(guān)于取值傳值問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
jQuery實(shí)現(xiàn)長(zhǎng)文字部分顯示代碼
在網(wǎng)頁(yè)上只有一個(gè)小區(qū)域,但是說(shuō)明性的文字又很長(zhǎng),下面這段腳本實(shí)現(xiàn)的是長(zhǎng)文字的部分顯示,有類(lèi)似需求的朋友可以參考下哈,希望對(duì)你有所幫助2013-05-05
jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
最近把jquery中的dom操作和jquery中的事件和動(dòng)畫(huà)的方法都大體測(cè)了一下。本來(lái)想細(xì)細(xì)的把每個(gè)方法都寫(xiě)出來(lái)介紹下2011-11-11
jQuery簡(jiǎn)單幾行代碼實(shí)現(xiàn)tab切換
本文給大家介紹的是一款使用jQuery實(shí)現(xiàn)的簡(jiǎn)易選項(xiàng)卡的代碼,通過(guò)控制css熟悉來(lái)實(shí)現(xiàn)tab切換,思路清晰,這里推薦給大家。2015-03-03
jQuery實(shí)現(xiàn)右側(cè)顯示可向左滑動(dòng)展示的深色QQ客服效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)右側(cè)顯示可向左滑動(dòng)展示的深色QQ客服效果代碼,涉及jQuery控制頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10

