Jquery插件寫法筆記整理
更新時間:2012年09月06日 17:16:53 作者:
大部分jQuery插件都是這種類型的插件,由于這種插件是將對象方法封裝起來,在jQuery選擇器獲取jQuery對象過程中進行操作,從而發(fā)揮jQuery強大的選擇器優(yōu)勢
jQuery插件類型:
1. jQuery方法:
大部分jQuery插件都是這種類型的插件,由于這種插件是將對象方法封裝起來,在jQuery選擇器獲取jQuery對象過程中進行操作,從而發(fā)揮jQuery強大的選擇器優(yōu)勢。
2. 全局函數(shù):
也可以把自定義的功能函數(shù)獨立附加到j(luò)Query命名空間下,從而作為jQuery作用域下的一個公共函數(shù)使用。但全局函數(shù)沒有被綁定到j(luò)Query對象上,故不能在選擇器獲取的jQuery對象上調(diào)用。需要通過jQuery.fn()或$.fn()方式進行引用。
3. 選擇器:
覺得jQuery提供的選擇器不夠用,或不方便的話,可以考慮自定義選擇器。
jQuery插件機制:
① 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插件擴展測試" />
※ jQuery.extend()方法除了可以創(chuàng)建插件外,還可以用來擴展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對象過程中進行操作,從而發(fā)揮jQuery強大的選擇器優(yōu)勢。
2. 全局函數(shù):
也可以把自定義的功能函數(shù)獨立附加到j(luò)Query命名空間下,從而作為jQuery作用域下的一個公共函數(shù)使用。但全局函數(shù)沒有被綁定到j(luò)Query對象上,故不能在選擇器獲取的jQuery對象上調(diào)用。需要通過jQuery.fn()或$.fn()方式進行引用。
3. 選擇器:
覺得jQuery提供的選擇器不夠用,或不方便的話,可以考慮自定義選擇器。
jQuery插件機制:
① 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插件擴展測試" />
※ jQuery.extend()方法除了可以創(chuàng)建插件外,還可以用來擴展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下擴展插件和拓展函數(shù)的寫法(匿名函數(shù)使用的典型例子)
- 跟我一起學(xué)寫jQuery插件開發(fā)方法(附完整實例及下載)
- 一步一步教你寫一個jQuery的插件教程(Plugin)
- 10分鐘學(xué)會寫Jquery插件實例教程
相關(guān)文章
jQuery中serializeArray()與serialize()的區(qū)別實例分析
這篇文章主要介紹了jQuery中serializeArray()與serialize()的區(qū)別,結(jié)合實例形式分析了jQuery中serializeArray()與serialize()的具體功能、使用技巧與用法區(qū)別,需要的朋友可以參考下2015-12-12jquery formValidator插件ajax驗證 內(nèi)容不做任何修改再離開提示錯誤的bug解決方法
query formValidator插件非常好用,但是有一個嚴重的Bug,在使用ajax驗證的時候,如果輸入框的內(nèi)容已經(jīng)存在,把鼠標放到輸入框,不做任何修改再離開,則會提示錯誤,很是郁悶2013-01-01jQuery實現(xiàn)頁面評論欄中訪客信息自動填寫功能的方法
訪客信息自動填寫即是利用cookie來記錄訪客第一次評論時填寫的信息,這樣以后再評論時實現(xiàn)一個自動填寫,這里我們以WordPress為例展示jQuery實現(xiàn)頁面評論欄中訪客信息自動填寫功能的方法:2016-05-05jQuery對象和DOM對象的相互轉(zhuǎn)化實現(xiàn)代碼
jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。jQuery對象是jQuery獨有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對象;2010-03-03jQuery插件HighCharts實現(xiàn)2D柱狀圖、折線圖的組合多軸圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)2D柱狀圖、折線圖的組合多軸圖效果,結(jié)合實例形式分析了jQuery使用HighCharts插件同時繪制柱狀圖、折線圖的實現(xiàn)技巧與相關(guān)操作步驟,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03一張表格告訴你windows.onload()與$(document).ready()的區(qū)別
這篇文章主要介紹了windows.onload()與$(document).ready()的區(qū)別2014-05-05