Jquery外掛程式寫法筆記整理

jQuery外掛程式類型：
1. jQuery方法：
大部分jQuery外掛程式都是這種類型的外掛程式，由於這種外掛程式是將對象方法封裝起來，在jQuery選取器擷取jQuery對象過程中進行操作，從而發揮jQuery強大的選取器優勢。
2. 全域函數：
也可以把自訂的功能函數獨立附加到jQuery命名空間下，從而作為jQuery範圍下的一個公用函數使用。但全域函數沒有被綁定到jQuery對象上，故不能在選取器擷取的jQuery對象上調用。需要通過jQuery.fn()或$.fn()方式進行引用。
3. 選取器：
覺得jQuery提供的選取器不夠用，或不方便的話，可以考慮自訂選取器。
jQuery外掛程式機制：
① jQuery.extend()方法：能夠建立全域函數或選取器。
By：所謂全域函數，就是jQuery對象的方法，實際上就是位於jQuery命名空間內部的函數，有人把這類函數稱為工具 + 生產力函數，這些函數都有一個共同特徵，就是不直接操作DOM元素，而是操作Javascript的非元素對象，或者執行其他非對象的特定操作，如jQuery的each()函數和noConflict()函數
例：在jQuery命名空間上建立兩個公用函數
複製代碼 代碼如下:
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("請輸入一個數值？");
var b = prompt("請再輸入一個數值？");
var c = jQuery.minValue(a,b);
var d = jQuery.maxValue(a,b);
alert("你輸入的最大值是：" + d + "\n你輸入的最小值是：" + c);
});
})
<input type="button" value="jQuery外掛程式擴充測試" />

※ jQuery.extend()方法除了可以建立外掛程式外，還可以用來擴充jQuery對象。
例如：調用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]);
}
})

例：建立jQuery全域函數
複製代碼 代碼如下:
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("請輸入一個數值？");
var b = prompt("請再輸入一個數值？");
var c = jQuery.css8.minValue(a,b);
var d = jQuery.css8.maxValue(a,b);
alert("你輸入的最大值是：" + d + "\n你輸入的最小值是：" + c);
});
})

By：如果要向jQuery命名空間上添加一個函數，只需要將這個新函數制定為jQuery對象的一個屬性即可。其中jQuery對象名也可以簡寫為$，jQuery.css8==$.css8
② jQuery.fn.extend()方法：能夠建立jQuery對象方法。
例：來個最簡單的jQuery對象方法
複製代碼 代碼如下:
jQuery.fn.test = function(){
alert("這是jQuery對象方法！");
}
$(function(){
$("div").click(function(){
$(this).test();
});
})