js實例教程-Jquery插件寫法筆記整理 jQuery.extend()方法

发布时间:2018-11-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js實例教程-Jquery插件寫法筆記整理 jQuery.extend()方法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小寶典致力於為廣大程序猿(媛)提供高品質的代碼服務,請大家多多光顧小站,小寶典在此謝過。

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){
$("p").htML($("p").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(){
$("p").click(function(){
$(this).test();
});
})

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){
$("p").html($("p").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(){
$("p").click(function(){
$(this).test();
});
})

覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦!&nbsp;js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-Jquery插件寫法筆記整理&nbsp;jQuery.extend()方法全部内容,希望文章能够帮你解决js實例教程-Jquery插件寫法筆記整理&nbsp;jQuery.extend()方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。