Jquery插件編寫簡(jiǎn)明教程
更新時(shí)間：2014年03月25日 10:00:13 作者：
這篇文章主要介紹了Jquery插件編寫簡(jiǎn)明教程,jquery插件開發(fā)實(shí)例,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
/*
1.jQuery插件文件名推薦命名為 jquery.[插件名].js 以免和其他javascript庫插件混淆。例如命名為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)前通過選擇器獲取的jquery對(duì)象，而不像一般方法哪樣，例如chick()方法，內(nèi)部的this指向的dom元素
4.可以通過this.each來遍歷所有元素
5.所有的方法或函數(shù)插件，都應(yīng)當(dāng)以分號(hào)結(jié)尾，否者壓縮的時(shí)候可能出現(xiàn)問題，為了更穩(wěn)妥一些，甚至可以在插件頭部先加上一個(gè)分號(hào)，
以免他人不規(guī)范的代碼給查詢帶來影響。
6.插件應(yīng)該返回一個(gè)jquery對(duì)象，以保證插件可鏈?zhǔn)讲僮?。除非插件需要返回的是一些需要回去的量，例如字符串或者?shù)組
7.避免在插件內(nèi)部使用$作為jquery對(duì)象的別名，而應(yīng)使完整的jquery來表示，這樣可以避免沖突。當(dāng)然，也可以利用閉包這種技巧來回避
這兒?jiǎn)栴}，使插件內(nèi)部繼續(xù)使用$作為jquery的別名。
*/
//;為了更好的兼容性，開始有個(gè)分號(hào)
;(function($){//此處將$作為匿名函數(shù)的形參
//$.fn.extend 擴(kuò)展插件
$.fn.extend({
"color":function(value){//color 自己寫的插件方法名
//jQuery提供了css方法可以直接寫成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");
}
1.jQuery插件文件名推薦命名為 jquery.[插件名].js 以免和其他javascript庫插件混淆。例如命名為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)前通過選擇器獲取的jquery對(duì)象，而不像一般方法哪樣，例如chick()方法，內(nèi)部的this指向的dom元素
4.可以通過this.each來遍歷所有元素
5.所有的方法或函數(shù)插件，都應(yīng)當(dāng)以分號(hào)結(jié)尾，否者壓縮的時(shí)候可能出現(xiàn)問題，為了更穩(wěn)妥一些，甚至可以在插件頭部先加上一個(gè)分號(hào)，
以免他人不規(guī)范的代碼給查詢帶來影響。
6.插件應(yīng)該返回一個(gè)jquery對(duì)象，以保證插件可鏈?zhǔn)讲僮?。除非插件需要返回的是一些需要回去的量，例如字符串或者?shù)組
7.避免在插件內(nèi)部使用$作為jquery對(duì)象的別名，而應(yīng)使完整的jquery來表示，這樣可以避免沖突。當(dāng)然，也可以利用閉包這種技巧來回避
這兒?jiǎn)栴}，使插件內(nèi)部繼續(xù)使用$作為jquery的別名。
*/
//;為了更好的兼容性，開始有個(gè)分號(hào)
;(function($){//此處將$作為匿名函數(shù)的形參
//$.fn.extend 擴(kuò)展插件
$.fn.extend({
"color":function(value){//color 自己寫的插件方法名
//jQuery提供了css方法可以直接寫成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使用插件示例：
復(fù)制代碼 代碼如下:
<body>
<div id="div" onclick="red()">dddddddddddddddd</div>
</body>
<div id="div" onclick="red()">dddddddddddddddd</div>
</body>
相關(guān)文章
jquery請(qǐng)求servlet實(shí)現(xiàn)ajax異步請(qǐng)求的示例
下面小編就為大家?guī)硪黄猨query請(qǐng)求servlet實(shí)現(xiàn)ajax異步請(qǐng)求的示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了jquery獲得當(dāng)前html頁面源碼的方法,涉及jquery針對(duì)頁面元素的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
jQuery中調(diào)用WebService方法小結(jié)
以前在寫ajax請(qǐng)求時(shí)，總是喜歡使用jQuery+ashx的方式進(jìn)行調(diào)用，今天采取jQuery+WebService的方法來做ajax請(qǐng)求，發(fā)現(xiàn)這種方式比使用ashx的方式要更方便。2011-03-03
jquery sortable的拖動(dòng)方法示例詳解
本文以示例的方式為大家介紹下jquery sortable的拖動(dòng)方法的具體實(shí)現(xiàn)，感興趣的朋友可以參考下2014-01-01
這篇文章主要為大家詳細(xì)介紹了Jquery UI 模仿淘寶搜索下拉列表功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
JQuery Dialog(JS模態(tài)窗口,可拖拽的DIV) 效果實(shí)現(xiàn)代碼2010-02-02
jquery實(shí)現(xiàn)簡(jiǎn)單的彈窗效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
探討JQUERY JSON的反序列化類 using問題的解決方法
本篇文章是對(duì)JQUERY JSON的反序列化類 using問題的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要給大家分享了一段基于jquery實(shí)現(xiàn)等比縮放圖片的代碼，非常的實(shí)用，這里推薦給大家2014-12-12
詳解強(qiáng)大的jQuery選擇器之基本選擇器、層次選擇器
自從接觸了jQuery后就為其強(qiáng)大的選擇器所震撼，這也正是jQuery的優(yōu)勢(shì)所在2012-02-02