Jquery中$与$.fn的区别

开心麻薯

于 2019-06-12 16:19:48 发布

阅读量536

点赞数

分类专栏： javascripe

javascripe 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Jquery中$与$.fn的区别

当今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>

复制代码

 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>