標籤：
一、jQuery外掛程式的類型1. jQuery方法很大一部分的jQuery外掛程式都是這種類型，由於此類外掛程式是將對象方法封裝起來，在jQuery選取器擷取jQuery對象過程中進行操作，從而發揮jQuery強大的選取器優勢。
2. 全域函數法可以把自訂的功能函數獨立附加到jQuery命名空間下，從而作為jQuery範圍下的一個公用函數使用。
但全域函數沒有被綁定到jQuery對象上，故不能在選取器擷取的jQuery對象上調用。需要通過jQuery.fn()或$.fn()方式進行引用。
如果覺得jQuery提供的選取器不夠用或不方便的話，可以考慮自訂選取器。
二、jQuery外掛程式的機制1. jQuery.extend()方法這種方法能夠建立全域函數或選取器。
所謂全域函數，就是jQuery對象的方法，實際上就是位於jQuery命名空間內部的函數，有人把這類函數稱為工具 + 生產力函數，這些函數都有一個共同特徵，就是不直接操作DOM元素，而是操作Javascript的非元素對象，或者執行其他非對象的特定操作，如jQuery的each()函數和noConflict()函數。
例如，在jQuery命名空間上建立兩個公用函數：
jQuery.extend({ min : function(a,b){ return a<b?a:b; }, max : function(a,b){ return a<b?b:a; } }) $(function(){ $("input").click(function(){ var a = prompt("請輸入一個數："); var b = prompt("再輸入一個數："); var c = jQuery.min(a,b); var d = jQuery.max(a,b); alert("最大值是：" + d + "\n最小值是：" + c); }); }) <input type="button" value="jQuery擴充測試" />
jQuery.extend()方法除了可以建立外掛程式外，還可以用來擴充jQuery對象。
例如，調用jQuery.extend()方法把對象a和對象b合并為一個新的對象，並返回合并對象將其賦值給變數c：
var a = {name : "aaa",pass : 777}; var b = {name : "bbb",pass : 888,age : 9}; var c = jQuery.extend(a,b); $(function(){ for(var name in c){ $("div").html($("div").html() + "<br />"+ name + ":" + c[name]); } })
如果要向jQuery命名空間上添加一個函數，只需要將這個新函數制定為jQuery對象的一個屬性即可。其中jQuery對象名也可以簡寫為$，jQuery.smalluv==$.smalluv。
例如，建立jQuery全域函數：
jQuery.smalluv = { min : function(a,b){ return a<b?a:b; }, max : function(a,b){ return a<b?b:a; } } $(function(){ $("input").click(function(){ var a = prompt("請輸入一個數:"); var b = prompt("再輸入一個數:"); var c = jQuery.smalluv.min(a,b); var d = jQuery.smalluv.max(a,b); alert("最大值是：" + d + "\n最小值是：" + c); }); })2. jQuery.fn.extend()方法
這種方法能夠建立jQuery對象方法。
舉一個最簡單的jQuery對象方法例子：
jQuery.fn.test = function(){ alert("jQuery對象方法"); } $(function(){ $("div").click(function(){ $(this).test(); }); }) 三、總結
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>最簡單的jquery外掛程式</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../res/jquery/jquery-1.4.4.min.js"></script> <script type="text/javascript"> (function($) { jQuery.extend({//寫法1 a: function(h){ $("#ad").html(h); }, b:function(h){ alert(h); } }) })(jQuery); (function($) {//寫法2 jQuery.a=function(h){ $("#ad").html(h); } jQuery.b=function(h){ alert(h); } })(jQuery); $(document).ready(function(){ $.a("abc"); $.b("xyz"); }); </script> </head> <body> <h3>最簡單的jQuery外掛程式</h3> <div id="ad"></div> </body></html>
jQuery 外掛程式寫法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
