Jquery插件寫法筆記整理
更新時間：2012年09月06日 17:16:53 作者：
大部分jQuery插件都是這種類型的插件，由于這種插件是將對象方法封裝起來，在jQuery選擇器獲取jQuery對象過程中進(jìn)行操作，從而發(fā)揮jQuery強大的選擇器優(yōu)勢
jQuery插件類型：
1. jQuery方法：
大部分jQuery插件都是這種類型的插件，由于這種插件是將對象方法封裝起來，在jQuery選擇器獲取jQuery對象過程中進(jìn)行操作，從而發(fā)揮jQuery強大的選擇器優(yōu)勢。
2. 全局函數(shù)：
也可以把自定義的功能函數(shù)獨立附加到j(luò)Query命名空間下，從而作為jQuery作用域下的一個公共函數(shù)使用。但全局函數(shù)沒有被綁定到j(luò)Query對象上，故不能在選擇器獲取的jQuery對象上調(diào)用。需要通過jQuery.fn()或$.fn()方式進(jìn)行引用。
3. 選擇器：
覺得jQuery提供的選擇器不夠用，或不方便的話，可以考慮自定義選擇器。
jQuery插件機(jī)制：
① jQuery.extend()方法：能夠創(chuàng)建全局函數(shù)或選擇器。
By：所謂全局函數(shù)，就是jQuery對象的方法，實際上就是位于jQuery命名空間內(nèi)部的函數(shù)，有人把這類函數(shù)稱為實用工具函數(shù)，這些函數(shù)都有一個共同特征，就是不直接操作DOM元素，而是操作Javascript的非元素對象，或者執(zhí)行其他非對象的特定操作，如jQuery的each()函數(shù)和noConflict()函數(shù)
例：在jQuery命名空間上創(chuàng)建兩個公共函數(shù)
jQuery.extend({
minValue : function(a,b){
return a<b?a:b;
},
maxValue : function(a,b){
return a<b?b:a;
}
})
$(function(){
$("input").click(function(){
var a = prompt("請輸入一個數(shù)值？");
var b = prompt("請再輸入一個數(shù)值？");
var c = jQuery.minValue(a,b);
var d = jQuery.maxValue(a,b);
alert("你輸入的最大值是：" + d + "\n你輸入的最小值是：" + c);
});
})
<input type="button" value="jQuery插件擴(kuò)展測試" />
※ jQuery.extend()方法除了可以創(chuàng)建插件外，還可以用來擴(kuò)展jQuery對象。
例如：調(diào)用jQuery.extend()方法把對象a和對象b合并為一個新的對象，并返回合并對象將其賦值給變量c
var a = {name : "zhu",pass : 123}
var b = {name : "wang",pass : 456,age : 1}
var c = jQuery.extend(a,b);
$(function(){
for(var name in c){
$("div").html($("div").html() + "<br />"+ name + ":" + c[name]);
}
})
例：創(chuàng)建jQuery全局函數(shù)
jQuery.css8 = {
minValue : function(a,b){
return a<b?a:b;
},
maxValue : function(a,b){
return a<b?b:a;
}
}
$(function(){
$("input").click(function(){
var a = prompt("請輸入一個數(shù)值？");
var b = prompt("請再輸入一個數(shù)值？");
var c = jQuery.css8.minValue(a,b);
var d = jQuery.css8.maxValue(a,b);
alert("你輸入的最大值是：" + d + "\n你輸入的最小值是：" + c);
});
})
By：如果要向jQuery命名空間上添加一個函數(shù)，只需要將這個新函數(shù)制定為jQuery對象的一個屬性即可。其中jQuery對象名也可以簡寫為$，jQuery.css8==$.css8
② jQuery.fn.extend()方法：能夠創(chuàng)建jQuery對象方法。
例：來個最簡單的jQuery對象方法
jQuery.fn.test = function(){
alert("這是jQuery對象方法！");
}
$(function(){
$("div").click(function(){
$(this).test();
});
})
1. jQuery方法：
大部分jQuery插件都是這種類型的插件，由于這種插件是將對象方法封裝起來，在jQuery選擇器獲取jQuery對象過程中進(jìn)行操作，從而發(fā)揮jQuery強大的選擇器優(yōu)勢。
2. 全局函數(shù)：
也可以把自定義的功能函數(shù)獨立附加到j(luò)Query命名空間下，從而作為jQuery作用域下的一個公共函數(shù)使用。但全局函數(shù)沒有被綁定到j(luò)Query對象上，故不能在選擇器獲取的jQuery對象上調(diào)用。需要通過jQuery.fn()或$.fn()方式進(jìn)行引用。
3. 選擇器：
覺得jQuery提供的選擇器不夠用，或不方便的話，可以考慮自定義選擇器。
jQuery插件機(jī)制：
① jQuery.extend()方法：能夠創(chuàng)建全局函數(shù)或選擇器。
By：所謂全局函數(shù)，就是jQuery對象的方法，實際上就是位于jQuery命名空間內(nèi)部的函數(shù)，有人把這類函數(shù)稱為實用工具函數(shù)，這些函數(shù)都有一個共同特征，就是不直接操作DOM元素，而是操作Javascript的非元素對象，或者執(zhí)行其他非對象的特定操作，如jQuery的each()函數(shù)和noConflict()函數(shù)
例：在jQuery命名空間上創(chuàng)建兩個公共函數(shù)
復(fù)制代碼 代碼如下:
jQuery.extend({
minValue : function(a,b){
return a<b?a:b;
},
maxValue : function(a,b){
return a<b?b:a;
}
})
$(function(){
$("input").click(function(){
var a = prompt("請輸入一個數(shù)值？");
var b = prompt("請再輸入一個數(shù)值？");
var c = jQuery.minValue(a,b);
var d = jQuery.maxValue(a,b);
alert("你輸入的最大值是：" + d + "\n你輸入的最小值是：" + c);
});
})
<input type="button" value="jQuery插件擴(kuò)展測試" />
※ jQuery.extend()方法除了可以創(chuàng)建插件外，還可以用來擴(kuò)展jQuery對象。
例如：調(diào)用jQuery.extend()方法把對象a和對象b合并為一個新的對象，并返回合并對象將其賦值給變量c
復(fù)制代碼 代碼如下:
var a = {name : "zhu",pass : 123}
var b = {name : "wang",pass : 456,age : 1}
var c = jQuery.extend(a,b);
$(function(){
for(var name in c){
$("div").html($("div").html() + "<br />"+ name + ":" + c[name]);
}
})
例：創(chuàng)建jQuery全局函數(shù)
復(fù)制代碼 代碼如下:
jQuery.css8 = {
minValue : function(a,b){
return a<b?a:b;
},
maxValue : function(a,b){
return a<b?b:a;
}
}
$(function(){
$("input").click(function(){
var a = prompt("請輸入一個數(shù)值？");
var b = prompt("請再輸入一個數(shù)值？");
var c = jQuery.css8.minValue(a,b);
var d = jQuery.css8.maxValue(a,b);
alert("你輸入的最大值是：" + d + "\n你輸入的最小值是：" + c);
});
})
By：如果要向jQuery命名空間上添加一個函數(shù)，只需要將這個新函數(shù)制定為jQuery對象的一個屬性即可。其中jQuery對象名也可以簡寫為$，jQuery.css8==$.css8
② jQuery.fn.extend()方法：能夠創(chuàng)建jQuery對象方法。
例：來個最簡單的jQuery對象方法
復(fù)制代碼 代碼如下:
jQuery.fn.test = function(){
alert("這是jQuery對象方法！");
}
$(function(){
$("div").click(function(){
$(this).test();
});
})
您可能感興趣的文章:
- 分享一個自己動手寫的jQuery分頁插件
- 基于編寫jQuery的無縫滾動插件
- jquery+css3打造一款ajax分頁插件(自寫)
- 自己使用jquery寫的一個無縫滾動的插件
- Jquery插件編寫簡明教程
- 寫JQuery插件的基本知識
- jQuery插件的寫法分享
- jquery分頁插件AmSetPager(自寫)
- 編寫自己的jQuery插件簡單實現(xiàn)代碼
- 自寫的一個jQuery圓角插件
- jQuery下擴(kuò)展插件和拓展函數(shù)的寫法（匿名函數(shù)使用的典型例子）
- 跟我一起學(xué)寫jQuery插件開發(fā)方法（附完整實例及下載）
- 一步一步教你寫一個jQuery的插件教程(Plugin)
- 10分鐘學(xué)會寫Jquery插件實例教程
相關(guān)文章
這篇文章主要介紹了JQuery animate動畫應(yīng)用,結(jié)合具體實例形式分析了jQuery使用animate動畫實現(xiàn)選項卡及樣式動態(tài)變化相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
基于jQuery的的一個隔行變色，鼠標(biāo)移動變色的小插件
基于jQuery的的一個隔行變色，鼠標(biāo)移動變色的小插件，學(xué)習(xí)jquery的朋友可以參考下。2010-07-07
jQuery EasyUI 對話框(Dialog)用法與EasyUI的窗口用法極為相似，最終的效果圖也只與窗口的效果圖差幾個按鈕2010-10-10
基于jquery的自定義鼠標(biāo)提示效果 jquery.toolTip
看到其它網(wǎng)站A標(biāo)簽title效果，心里癢癢，就想也用到自己網(wǎng)站上。 正好在學(xué)jquery 插件擴(kuò)展，就參照前輩代碼，自己動手寫了一個2010-11-11
這篇文章主要介紹了jQuery實現(xiàn)的簡單無刷新評論功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下2017-11-11
基于jQuery和CSS3實現(xiàn)APPLE TV海報視差效果
這篇文章主要介紹了基于jQuery和CSS3實現(xiàn)APPLE TV海報視差效果,需要的朋友可以參考下2017-06-06
jQuery AJAX實現(xiàn)調(diào)用頁面后臺方法和web服務(wù)定義的方法分享
jQuery AJAX實現(xiàn)調(diào)用頁面后臺方法和web服務(wù)定義的方法分享，需要的朋友可以參考下2012-03-03
使用jquery獲取一組checkbox的值實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11 
這篇文章主要介紹了jquery讓指定的元素閃爍顯示的方法,涉及jQuery操作css樣式的技巧,非常具有實用價值,需要的朋友可以參考下
2015-03-03