jQuery为开发插件提拱了两个方法,分别是:

 代码如下 复制代码

jQuery.fn.extend(object);  和   jQuery.extend(object);

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

fn 是什么东西呢。查看jQuery代码,就不难发现。

 代码如下 复制代码

jQuery.fn = jQuery.prototype = {  init: function( selector, context ) {//….         //……     };

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

 代码如下 复制代码

$.extend({       add:function(a,b){return a+b;}     });

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,

JavaScript代码$.add(3,4); //return 7

jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

jQuery.fn.extend 是对jQuery方法进行扩展

demo:  jquery 本身并不提供 jQuery.color() 这个方法,如果我们需要对jQuery本身提供的方法进行扩展,则我们就需要是用jQuery.fn.extend

 代码如下 复制代码

jQuery.fn.extend({
    color:function(val)
    {
          if(val==undefined){
         
               return $(this).css("color");
            }else{
    
              return $(this).css("color",val);
            }
    }
})
      $(this).color("red");//对jquery对象进行颜色设置
     alert($(this).color());//获取jquery对象的颜色,并用对话框弹出

2.jQuery.extend  对jQuery对象的扩展,可以理解为静态方法,不需要实例jQuery就可以使用

 代码如下 复制代码

jQuery.extend( {
    myshow:function(a,b)
    {
     return a+b;
    }
  })

调用:alert($.add(3, 4));

真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

简单的理解

第一种方式

 代码如下 复制代码

jQuery.extend(object);    扩展的方法可以直接调用

$.extend({    add:function(a,b){return a+b;}    });

调用方式为:

 代码如下 复制代码

$.add(3,4);

jQuery.fn.extend(object); 扩展的方法不能直接调用,必须配合jQuery对象

第二种方式

 代码如下 复制代码

$.fn.extend({    show:function(){alert($(this).text())}    };

调用方式:

 代码如下 复制代码

$("#testid").show();//jQuery 对象才能调用。

$.show();//这种调用时错误的,不会得到预期的效果。

注意:

在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现 jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这是很重要的,在jQuery.js中到处体现这一点

jquery.fn.extend与jquery.extend用法与区别的更多相关文章

  1. jQuery源码-jQuery.fn.attr与jQuery.fn.prop

    jQuery.fn.attr.jQuery.fn.prop的区别 假设页面有下面这么个标签,$('#ddd').attr('nick').$('#ddd').prop('nick')分别会取得什么值? ...

  2. jQuery.fn.attr与jQuery.fn.prop

    jQuery.fn.attr与jQuery.fn.prop jQuery.fn.attr.jQuery.fn.prop的区别 假设页面有下面这么个标签,$('#ddd').attr('nick').$ ...

  3. jQuery中delegate与on的用法与区别

    在jQuery1.7中 .delegate()已被.on()取代.对于早期版本,它仍然使用事件委托的最有效手段. 在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的. .de ...

  4. jQuery中bind与live的用法与区别

    首先介绍这两个方法之前,我们常用的是click()方法 $("a").click(function() { alert("hello"); }); click( ...

  5. jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别

    jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...

  6. jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究

    终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...

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

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方 ...

  8. jQuery.fn和jQuery.prototype jquery.extend() jquery.fn.extend()区别介绍

    这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: (function( win ...

  9. jQuery.fn.extend()

    jQuery.fn.extend() extend()方法是定义在jQuery构造函数的prototype对象上面的一个方法,这样做就能使得所有jQuery对象的实例都能共享这个方法.jQuery构造 ...

  10. jQuery.extend()、jQuery.fn.extend()扩展方法具体解释

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/dreamsunday/article/details/25193459 jQuery自己定义了jQu ...

随机推荐

  1. what's the help of "unnecessary" pointer comparison

    引述自http://c-programming.itags.org/q_c-programming-language_191518.html 源代码中的宏min中使用了 (void) (&_x ...

  2. The difference between the request time and the current time is too large.阿里云oss上传图片报错

    The difference between the request time and the current time is too large. 阿里云oss上传图片的时候报错如上, 解决办法,把 ...

  3. js简单Base64编码解码

    var str = 'javascript'; window.btoa(str) //转码结果 "amF2YXNjcmlwdA==" window.atob("amF2Y ...

  4. 分分钟学会GCD

    2014 什么是GCD Grand Central Dispatch (GCD)是异步运行任务的技术之中的一个.一般将应用程序中记述的线程管理用的代码在系统级中实现.因为线程管理是作为系统的一部分来实 ...

  5. Dubbo -- 系统学习 笔记 -- 示例 -- 直连提供者

    Dubbo -- 系统学习 笔记 -- 目录 示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 直连提供者 在开发及测试环境下,经常需要绕过注册中心,只测试指定服务提供者,这时候 ...

  6. SpringMVC -- 梗概--源码--壹--跳转

    1.配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version=&qu ...

  7. 8 -- 深入使用Spring -- 3...4 在ApplicationContext中使用资源

    8.3.4 在ApplicationContext中使用资源 不管以怎样的方式创建ApplicationContext实例,都需要为ApplicationContext指定配置文件,Spring允许使 ...

  8. cocos2dx 优化略记

    缓存cache: 预加载资源到内存, 可以异步加载.  直接使用sprite:create()来加载资源的话,  有时候会发现,  在第一次运行动作的时候会变的很卡.  那是因为第一次要加载资源到内存 ...

  9. 【代码审计】iZhanCMS_v2.1 代码执行漏洞分析

      0x00 环境准备 iZhanCMS官网:http://www.izhancms.com 网站源码版本:爱站CMS(zend6.0) V2.1 程序源码下载:http://www.izhancms ...

  10. 【代码审计】iZhanCMS_v2.1 前台存储型XSS漏洞分析

      0x00 环境准备 iZhanCMS官网:http://www.izhancms.com 网站源码版本:爱站CMS(zend6.0) V2.1 程序源码下载:http://www.izhancms ...