首頁 > web前端 > js教程 > 主體

Jquery外掛程式寫法筆記整理_jquery

WBOY
發布: 2016-05-16 17:50:11
原創
845 人瀏覽過

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(); }); })
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!