Jquery插件編寫簡明教程
更新時間:2014年03月25日 10:00:13 作者:
這篇文章主要介紹了Jquery插件編寫簡明教程,jquery插件開發(fā)實例,需要的朋友可以參考下
復制代碼 代碼如下:
/*
1.jQuery插件文件名推薦命名為 jquery.[插件名].js 以免和其他javascript庫插件混淆。例如命名為jquery.color.js
2.所有的對象方法名都應當附加到jQuery.fn對象上而所有的全局函數(shù)都應當附加到jQuery對象本身上。
3.在插件內部,this指向的是當前通過選擇器獲取的jquery對象,而不像一般方法哪樣,例如chick()方法,內部的this指向的dom元素
4.可以通過this.each來遍歷所有元素
5.所有的方法或函數(shù)插件,都應當以分號結尾,否者壓縮的時候可能出現(xiàn)問題,為了更穩(wěn)妥一些,甚至可以在插件頭部先加上一個分號,
以免他人不規(guī)范的代碼給查詢帶來影響。
6.插件應該返回一個jquery對象,以保證插件可鏈式操作。除非插件需要返回的是一些需要回去的量,例如字符串或者數(shù)組
7.避免在插件內部使用$作為jquery對象的別名,而應使完整的jquery來表示,這樣可以避免沖突。當然,也可以利用閉包這種技巧來回避
這兒問題,使插件內部繼續(xù)使用$作為jquery的別名。
*/
//;為了更好的兼容性,開始有個分號
;(function($){//此處將$作為匿名函數(shù)的形參
//$.fn.extend 擴展插件
$.fn.extend({
"color":function(value){//color 自己寫的插件方法名
//jQuery提供了css方法可以直接寫成this.css("屬性","值");
return this.css("color",value);
}
});
})(jQuery);//這里將jquery作為實參傳遞給匿名函數(shù)
function red(){
alert($("#div").color()+"證明插件可用");
alert($("#div").color("red")+"證明插件返回了一個Jquery對象");
$("#div").color("red");
}
1.jQuery插件文件名推薦命名為 jquery.[插件名].js 以免和其他javascript庫插件混淆。例如命名為jquery.color.js
2.所有的對象方法名都應當附加到jQuery.fn對象上而所有的全局函數(shù)都應當附加到jQuery對象本身上。
3.在插件內部,this指向的是當前通過選擇器獲取的jquery對象,而不像一般方法哪樣,例如chick()方法,內部的this指向的dom元素
4.可以通過this.each來遍歷所有元素
5.所有的方法或函數(shù)插件,都應當以分號結尾,否者壓縮的時候可能出現(xiàn)問題,為了更穩(wěn)妥一些,甚至可以在插件頭部先加上一個分號,
以免他人不規(guī)范的代碼給查詢帶來影響。
6.插件應該返回一個jquery對象,以保證插件可鏈式操作。除非插件需要返回的是一些需要回去的量,例如字符串或者數(shù)組
7.避免在插件內部使用$作為jquery對象的別名,而應使完整的jquery來表示,這樣可以避免沖突。當然,也可以利用閉包這種技巧來回避
這兒問題,使插件內部繼續(xù)使用$作為jquery的別名。
*/
//;為了更好的兼容性,開始有個分號
;(function($){//此處將$作為匿名函數(shù)的形參
//$.fn.extend 擴展插件
$.fn.extend({
"color":function(value){//color 自己寫的插件方法名
//jQuery提供了css方法可以直接寫成this.css("屬性","值");
return this.css("color",value);
}
});
})(jQuery);//這里將jquery作為實參傳遞給匿名函數(shù)
function red(){
alert($("#div").color()+"證明插件可用");
alert($("#div").color("red")+"證明插件返回了一個Jquery對象");
$("#div").color("red");
}
在HTML使用插件示例:
復制代碼 代碼如下:
<body>
<div id="div" onclick="red()">dddddddddddddddd</div>
</body>
<div id="div" onclick="red()">dddddddddddddddd</div>
</body>
相關文章
jquery請求servlet實現(xiàn)ajax異步請求的示例
下面小編就為大家?guī)硪黄猨query請求servlet實現(xiàn)ajax異步請求的示例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
JQuery Dialog(JS模態(tài)窗口,可拖拽的DIV) 效果實現(xiàn)代碼2010-02-02探討JQUERY JSON的反序列化類 using問題的解決方法
本篇文章是對JQUERY JSON的反序列化類 using問題的解決方法進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12