`
543334061
  • 浏览: 11777 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

jQuery.extend和jQuery.fn.extend的区别

 
阅读更多
当今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以后可以运行，呵呵呵，你猜对了。
分享到：
| HttpCilent 实例（2）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery $.fn.extend

    `$.fn.extend`是jQuery库中的一个核心方法，主要用于扩展jQuery对象的方法集合。这个方法允许开发者自定义jQuery的函数，从而实现对DOM元素的操作或添加新的功能。在jQuery中，`$.fn`实际上是`$.prototype`的一个...

    浅谈jquery.fn.extend与jquery.extend区别

    jquery.fn.extend(object);给jQuery对象添加方法。 $.extend({ 　add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加一个为 add的“静态方法”，之后便可以在引入 jQuery　的地方，使用这...

    Jquery实现$.fn.extend和$.extend函数_.docx

    在JavaScript中，jQuery库提供了两种扩展对象的方法，即`$.fn.extend`和`$.extend`。它们都用于增加或修改现有对象的功能，但应用场景不同。本文将深入解析这两种方法的实现原理和用途。 首先，`$.fn.extend`是用于...

    jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析

    主要介绍了jQuery.extend 与 jQuery.fn.extend的用法及区别,结合实例形式分析了jQuery.extend与jQuery.fn.extend的功能、使用方法及区别,需要的朋友可以参考下

    jQuery.extend 函数详解

    通过本文的介绍，我们可以看到`jQuery.extend`是一个非常强大的工具，它不仅可以用来扩展jQuery的核心功能，还可以帮助开发者方便地管理和扩展自定义插件。理解它的不同用法和特性，对于提高前端开发效率和代码质量...

    jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 代码如下: jQuery.extend({ showName : ...

    深入理解jquery的$.extend()、$.fn和$.fn.extend()

    在jQuery中，`$.extend()`、`.fn`（即`jQuery.fn`）和`.fn.extend()`是开发者用于增强其功能和创建插件的关键部分。下面我们将详细探讨这三个概念。 1. `$.extend()` `$.extend()`方法用于合并一个或多个对象的属性...

    jQuery：jQuery.extend函数详解

    `jQuery.extend`不仅可以用于简单的对象合并，还可以用来扩展jQuery的静态方法和实例方法。 ##### 1. 扩展静态方法 通过使用`$.extend`，可以直接向jQuery全局对象中添加新的方法： ```javascript $.extend({ ...

    jquery.json-2.3.min.js和jquery.json-2.3.js

    jquery.json-2.3.min.js和jquery.json-2.3.js jQuery为开发插件提拱了两个方法，分别是：jQuery.extend(object); 为扩展jQuery类本身 jQuery.fn.extend(object);给jQuery对象添加方法。

    开发插件的两个方法jquery.fn.extend与jquery.extend

    jQuery为开发插件提拱了两个方法，分别是： JavaScript代码 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object)...

    jQuery.fn和jQuery.prototype区别介绍

    在JavaScript和jQuery的世界里，`jQuery.fn` 和 `jQuery.prototype` 是两个非常关键的概念，它们密切相关，但有着明确的区别。了解这些概念对于深入理解和自定义jQuery插件是至关重要的。 首先，`jQuery.fn` 是 `...

    jQuery.js中继承的实现.pdf

    `jQuery.fn`是jQuery对象的原型，因此`jQuery.fn.extend()`会将方法扩展到jQuery对象的实例上，使得实例可以直接调用这些方法。而`jQuery.extend()`则不会将方法扩展到实例上，这些方法通常需要通过jQuery类本身来...

    jquery的extend和fn.extend的使用说明

    jQuery为开发插件提拱了两个方法，分别是： 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象...

    jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    在jQuery库中，`jQuery.extend()` 和 `jQuery.fn.extend()` 是两种非常重要的方法，它们用于扩展和合并对象的属性。这两个方法在开发自定义插件或进行jQuery对象的定制时非常常见。 `jQuery.extend()` 用于合并一个...

Magicbox
Global site tag (gtag.js) - Google Analytics