当今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
转载于:https://www.cnblogs.com/bhlsheji/p/4024987.html
相关资源：深入理解jquery的$.extend()、$.fn和$.fn.extend()