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