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

jQuery.fn.extend();

jQuery.extend();

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

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

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

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

jQuery.extend(object)

为jQuery类添加类方法,可以理解为添加静态方法。如:

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //  2
jQuery.max(4,5); //  5
Objectj Query.extend( target, object1, [objectN])

用一个或多个其他对象来扩展一个对象,返回被扩展的对象

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery
.extend(settings, options);
结果:settings == { validate: true, limit: 5, name: "bar" }
jQuery.fn.extend(object);

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

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

$.fn.extend({               alertWhileClick:function() {                       $(this).click(function(){                                   alert($(this).val());                       });                 }        });        $("#input1").alertWhileClick(); // 页面上为:    

$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这 是很重要的,在jQuery.JS中到处体现这一点

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一个对象到jQuery的 prototype里去,这样的话就是插件机制了。

(function( $ ){
$.fn.tooltip = function( options ) {
};
//等价于
var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );

理解jquery的$.extend()、$.fn和$.fn.extend()的更多相关文章

  1. [JS] 理解jquery的$.extend()、$.fn和$.fn.extend()

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  2. Jquery自定义插件之$.extend()、$.fn和$.fn.extend()

    jquery插件的种类: 1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent().appendTo() 2.一种是类级别的插件开发,即给jQuery添加新的全局 ...

  3. 再谈JQuery插件$.extend(), $.fn和$.fn.extend()

    在我的博客中,曾经写过一篇关于JQuery插件的文章  https://www.cnblogs.com/wphl-27/p/6903170.html 今天看一个项目的代码时,看到使用JQuery插件部 ...

  4. $.extend()、$.fn和$.fn.extend()

      理解$.extend().$.fn和$.fn.extend()   原文链接:http://caibaojian.com/jquery-extend-and-jquery-fn-extend.ht ...

  5. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  6. 深入理解jQuery、Angular、node中的Promise

    最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...

  7. 深入理解JQuery插件开发

    如果你看到这篇文章,我确信你毫无疑问会认为jQuery是一个使用简便的库.jQuery可能使用起来很简单,但是它仍然有一些奇怪的地方,对它基本功能和概念不熟悉的人可能会难以掌握.但是不用担心,我下面已 ...

  8. 深入分析,理解jQuery.Deferred源码

    前言: 如果你对jQuery.Callback回调对象不了解,或者只掌握其方法,但是没有通过阅读源码理解,可以先阅读 前一章jQuery.Callbacks源码解读二,因为只有完全理解jQuery.C ...

  9. 深入理解jQuery插件开发(转)

    转自:http://blog.jobbole.com/30550/ 如果你看到这篇文章,我确信你毫无疑问会认为jQuery是一个使用简便的库.jQuery可能使用起来很简单,但是它仍然有一些奇怪的地方 ...

  10. [转]深入理解jQuery插件开发

    如果你看到这篇文章,我确信你毫无疑问会认为jQuery是一个使用简便的库.jQuery可能使用起来很简单,但是它仍然有一些奇怪的地方,对它基本功能和概念不熟悉的人可能会难以掌握.但是不用担心,我下面已 ...

随机推荐

  1. Myeclipse闪退故障

    Myeclipse在编辑代码是出现反复一个异常错误. Index out of bounds,而且窗口关闭后还是出现, 于是在任务管理器里强制关闭MyEclipse. 关闭后启动MyEclipse总是 ...

  2. 将IIS6.0中的某页设置成首页

  3. OC calendar 实践中的那些坑

    博客已经迁移到www.chjsun.top 最近想做一个万年历似的东西,因为需要把农历也添加进去,就想直接调用苹果自带的api,这样还方便一些, 搜索了一下,苹果对于时间的处理,还是提供了很多选择给我 ...

  4. BZOJ 1018 线段树维护图连通性

    用8个bool维护即可分别为LURU,LURD,LDRU,LDRD,LULD,RURD,Side[1],Side[2]即可. Side表示这一块有没有接到右边.Merge一下就可以了.码农题,WA了一 ...

  5. AngularJS执行流程详解

    一.启动阶段 大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点.我们可以把AngularJS当做一个类似jQuery的js库, ...

  6. WCF 部署在Windows 2012 IIS上各种报错的解决方法

    1.由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本 ,请添加处理程序.如果勇载文件,请添加 MIME 映射. 以管理员身份,在cmd中运行C:\Windows\Microsoft.NET\F ...

  7. dom扩展

    第十一章 DOM扩展 一.选择符API 1.querySelector()方法             接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. 2. ...

  8. 关于JAVA学习计划和感想

    学习计划第一阶段:    JAVA语言基础知识.包括异常.IO流.多线程.集合类.    要求:异常------掌握try-catch-finally的使用          IO流------掌握字 ...

  9. C#面向接口编程详解(1)——思想基础

    我想,对于各位使用面向对象编程语言的程序员来说,“接口”这个名词一定不陌生,但是不知各位有没有这样的疑惑:接口有什么用途?它和抽象类有什么区别?能不能用抽象类代替接口呢?而且,作为程序员,一定经常听到 ...

  10. IOS照片颠倒分析及移动/页面端的处理策略和思路

    前言: 前几天, 写了一篇关于IOS手机上传照片颠倒的技术分析文章: IOS照片颠倒分析及PHP服务端的处理. 不过其思路是从服务器来进行处理的, 这种做法相当普遍. 今天来讲述下, 如何从移动端/页 ...