當今web開發往往離不開Jquery的使用，Jquery以其簡潔的使用方式、良好的瀏覽器兼容性贏得了軟件研發同行的青睞，作為當中的一員，自然也不例外，雖然剛開始時非常排斥Jquery，今天我談一下對Jquery中$與$.fn的認識和理解，不正確地方深望指正：
1、什么是$?
答：jquery的還有一種表現形式；
2、看以下的樣例：
樣例01：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$與$.fn的差別——demo 01</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.test = function(a,b) {
return a+b;
};
alert($.test(4,4));
</script>
</head>
<body>
</body>
</html>
樣例02：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$與$.fn的差別——demo 02</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.extend({
test:function(a,b) {
return a+b;
}
});
alert($.test(4,4));
</script>
</head>
<body>
</body>
</html>
上面兩個樣例中的黃色背景出的代碼有什么不同和同樣？
答：除了功能同樣以外最大的同樣點在於調用函數（或方法）的方式同樣；上面兩個樣例最大的不同點在於聲明創建test方法的方式不同。
3、看以下的樣例：
樣例03：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$與$.fn的差別——demo 03</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.fn.test = function() {
return $(this).val();
};
$(function(){
alert($("#name").test());
});
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="高煥傑"/>
</body>
</html>
樣例04：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$與$.fn的差別——demo 04</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.fn.extend({
test:function() {
return $(this).val();
}
});
$(function(){
alert($("#name").test());
});
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="高煥傑"/>
</body>
</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：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$與$.fn的差別——demo 05</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.prototype.test = function() {
return $(this).val();
};
$(function(){
alert($("#name").test());
});
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="高煥傑"/>
</body>
</html>
樣例06：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$與$.fn的差別——demo 06</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<script type="text/javascript">
$.prototype.extend({
test:function() {
return $(this).val();
}
});
$(function(){
alert($("#name").test());
});
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="高煥傑"/>
</body>
</html>
上面兩個樣例通過將fn改為prototype以后能夠執行，呵呵呵，你猜對了。
0分下載demo:Jquery中$與$.fn的差別實例.zip