當今web開發往往離不開Jquery的使用，Jquery以其簡潔的使用方式、良好的瀏覽器兼容性贏得了軟件研發同行的青睞，作為其中的一員，自然也不例外，盡管剛開始時很排斥Jquery，今天我談一下對Jquery中$與$.fn的認識和理解，不對地方深望指正：
1、什么是$?
答：jquery的另一種表現形式；
2、看下面的例子：
例子01：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>$與$.fn的區別——demo 01</title> 5 <script type="text/javascript" src="./jquery-1.6.2.js"></script> 6 <script type="text/javascript"> 7 $.test = function(a,b) { 8 return a+b; 9 }; 10 alert($.test(4,4)); 11 </script> 12 </head> 13 <body> 14 </body> 15 </html>
2.
1 例子02： 2 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>$與$.fn的區別——demo 02</title> 7 <script type="text/javascript" src="./jquery-1.6.2.js"></script> 8 <script type="text/javascript"> 9 $.extend({ 10 test:function(a,b) { 11 return a+b; 12 } 13 }); 14 alert($.test(4,4)); 15 </script> 16 </head> 17 <body> 18 </body> 19 </html>
上面兩個例子中的黃色背景出的代碼有什么不同和相同？
答：除了功能相同以外最大的相同點在於調用函數（或方法）的方式相同；上面兩個例子最大的不同點在於聲明創建test方法的方式不同。
3、看下面的例子：
例子03：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>$與$.fn的區別——demo 03</title> 5 <script type="text/javascript" src="./jquery-1.6.2.js"></script> 6 <script type="text/javascript"> 7 $.fn.test = function() { 8 return $(this).val(); 9 }; 10 $(function(){ 11 alert($("#name").test()); 12 }); 13 </script> 14 </head> 15 <body> 16 <input type="hidden" id="name" name="name" value="高煥傑"/> 17 </body> 18 </html>
例子04：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>$與$.fn的區別——demo 04</title> 5 <script type="text/javascript" src="./jquery-1.6.2.js"></script> 6 <script type="text/javascript"> 7 $.fn.extend({ 8 test:function() { 9 return $(this).val(); 10 } 11 }); 12 $(function(){ 13 alert($("#name").test()); 14 }); 15 </script> 16 </head> 17 <body> 18 <input type="hidden" id="name" name="name" value="高煥傑"/> 19 </body> 20 </html>
上面兩個例子中的綠色背景出的代碼有什么不同和相同？
答：除了功能相同以外最大的相同點在於調用函數（或方法）的方式相同；上面兩個例子最大的不同點在於聲明創建test方法的方式不同。
4、Jquery中$與$.fn的區別是什么？
答：在回答這個問題以前，需要明白一個事實：Jquery的方法是可以拓展的，上面這4個例子都是對Jquery方法的拓展，從調用聲明創建方法的方式來看，可以歸結為兩類：一類直接由$符調用；另一類由$("")來調用，說到這里你是不是想到了Java語言中的靜態方法和實例方法，是的，如果從java類的角度認識調用創建的Jquery方法可能更好理解些，盡管Javascript沒有明確的類的概念。好了現在可以回答問題了：$拓展的方法是靜態方法，可以使用$直接調用，其拓展的方式有兩種，一般使用$.extend({});；而$.fn拓展的方法是實例方法，必須由“對象”$("")來調用，其拓展的方式同樣有兩種，一般使用$.fn.extend({ })。
5、知識延展，究竟什么是fn?
答：同樣在回答這樣一個問題以前請打開一個Jquery文件（0分下載） 搜索這樣一個字符“jQuery.prototype”，告訴我你看到了什么：jQuery.fn = jQuery.prototype = {......},嗯嗯，或許你已經猜到了——fn就是prototype，是這樣嗎？請看下面的兩個例子：
例子05：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>$與$.fn的區別——demo 05</title> 5 <script type="text/javascript" src="./jquery-1.6.2.js"></script> 6 <script type="text/javascript"> 7 $.prototype.test = function() { 8 return $(this).val(); 9 }; 10 $(function(){ 11 alert($("#name").test()); 12 }); 13 </script> 14 </head> 15 <body> 16 <input type="hidden" id="name" name="name" value="高煥傑"/> 17 </body> 18 </html>
例子06：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <title>$與$.fn的區別——demo 06</title> 5 <script type="text/javascript" src="./jquery-1.6.2.js"></script> 6 <script type="text/javascript"> 7 $.prototype.extend({ 8 test:function() { 9 return $(this).val(); 10 } 11 }); 12 $(function(){ 13 alert($("#name").test()); 14 }); 15 </script> 16 </head> 17 <body> 18 <input type="hidden" id="name" name="name" value="高煥傑"/> 19 </body> 20 </html>
上面兩個例子通過將fn改為prototype以后可以運行，呵呵呵，你猜對了。