Jquery外掛程式寫法筆記整理_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,bb: function(a,bb: function ){
return a},
maxValue : function(a,b){
return 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);
});
})

※ jQuery.extend()方法除了可以建立外掛外，還可以用來擴充jQuery物件。
例如：呼叫jQuery.extend()方法把對象a和對象b合併為一個新的對象，並返回合併對象將其賦值給變數c

複製代碼 代碼如下:

var a = {name : "zhu",pass : 123}
var b = {name : "wang",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() "
" name ":" c[name]);
}
})

例：建立jQuery全域函數

複製程式碼

程式碼如下:

jQuery.css8 = { >minValue : function(a,b){
return a},
maxValue : function(a,b){
return 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(); }); })