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. 《C++primer》v5 第7章 类 读书笔记 习题答案

    7.1.7.2.7.3 #include<iostream> #include<cstdio> #include<vector> #include<strin ...

  2. 如何给Firefox附加组件签名

    如何给Firefox附加组件签名 https://developer.mozilla.org/zh-CN/Add-ons/Distribution 2.打开https://addons.mozilla ...

  3. Java 验证码工具类

    package com.wuyu.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import ...

  4. Rails学习笔记一

    安装篇: 下载railsintalls 这里我下载的是rubyinstaller-1.9.3-p448 安装后,安装SQLite3数据库 下载sqlite3.def sqlite3.dll sqlit ...

  5. BZOJ 3675 序列分割

    斜率优化.注意要判分母为0的情况.dp数组可以滚一维. #include<iostream> #include<cstdio> #include<cstring> ...

  6. B样条基函数(cubic spline basis)

    B样条基函数用作权重 reference http://blog.csdn.net/tuqu

  7. LayaAir引擎——(九)

    var h = new Array(); var j = new Array(); var xbCursor = 0; function xbinit() { xbinitName(); xbRect ...

  8. 易图软件之EaseMap Desktop 1.0发布

    概述 易图软件之EaseMap Desktop 1.0是一款基于arcgis runtime for wpf开发的地图编辑软件. 软件代码编写历时1个月终于完成. 目前这个版本的功能包括: 地图基本操 ...

  9. Page 指令的各个属性及其功能

    转载:http://www.cnblogs.com/elleniou/archive/2012/09/09/2678101.html 语法规则: <@%page attribute1=”valu ...

  10. 使用SqlLocalDB命令行管理LocalDB

    SqlLocalDB.exe start v11.0 SqlLocalDB.exe info v11.0 SQL Server Management Stdio添加管道连接实例 默认实例名(local ...