Jquery中$与$.fn的区别

Posted uuuz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
技术图片

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以后可以运行,呵呵呵,你猜对了。

以上是关于Jquery中$与$.fn的区别的主要内容,如果未能解决你的问题,请参考以下文章

区别和详解:jQuery extend()和jQuery.fn.extend()

[ jquery 文档处理 insertBefore(content) before(content|fn) ] 此方法用于把所有匹配的元素插入到另一个指定的元素元素集合的前面,实现外部插入(代码片段

很实用的JQuery代码片段(转)

jquery - $.functionName 和 $.fn.FunctionName 之间的区别

jQuery中 $.extend 和 $.fn.extend 作用及区别

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段