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 的地方,使用这个方法了,

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

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

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

  1. $.fn.extend({
  2. alertWhileClick:function(){
  3. $(this).click(function(){
  4. alert($(this).val());
  5. });
  6. }
  7. });
  8. $("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>

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

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

转载自这里

[转载]jquery的extend和fn.extend的更多相关文章

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

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

  2. jQuery开发自定义插件 $.extend()与$.fn.extend()

    jQuery extend()和jQuery.fn.extend() jQuery提供两个用于封装扩展的方法: 1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直 ...

  3. 理解jQuery的$.extend与$.fn.extend

    https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...

  4. jQuery插件开发中$.extend和$.fn.extend辨析

    jQuery插件开发分为两种:   1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery. ...

  5. $.fn与$.fx什么意思; $.extend与$.fn.extend用法区别; $(function(){})和(function(){})(jQuery)

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...

  6. $.extend(),与$.fn.extend() 讲解

    $.extend(),与$.fn.extend() 讲解(一) (2013-07-11 10:24:31) 转载▼ 转自:http://blog.sina.com.cn/s/blog_a3bd3bd0 ...

  7. $.extend()和$.fn.extend()用法和区别

    $.extend()和$.fn.extend()用法和区别: 在自己制作插件的时候会经常用到$.extend()和$.fn.extend()两个函数,无论从外观还是作用都非常的类似,但是实际上它们的区 ...

  8. 插件的理解$.extend()与$.fn.extend()

    插件的理解.$.extend()与$.fn.extend()    插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身:2.对象级别的插件开发,即$.fn.exte ...

  9. jquery的$.extend和$.fn.extend作用及区别/用span实现进度条/腾讯云IIS端口号修改

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. ...

随机推荐

  1. python基础知识三

    在考虑它们的运算时,一定要想到python是一门面向对象语言,它对类型的要求是不那么严格的,因为在完全面向对象的语言中,一切都是对象. 那么让我们重新 考虑+ -  *  /等操作,不再拘泥于传统的数 ...

  2. 自定义Operation

    1.要自定义一个Operation 首先要创建一个继承于NSOperation的类. 2.在创建好的类的.h文件声明自定义的方法:-(instancetype)initWithDownLoadMess ...

  3. "Unable to get image data from canvas because the canvas has been tainted by cross-origin data"问题产生原因及解决办法

    一.问题描述: 在支持html5的浏览器中运行javascript脚本,脚本主要是操作网页上的标签canvas,出错的操作为, getImageData(img,……), chrome 下出错信息为: ...

  4. C++学习笔记-2-构造函数和析构函数

    问题2. 什么时候执行构造函数和析构函数  22:59:40 2015-07-22 做了一个实验: #include <iostream> class Object{ public: Ob ...

  5. C# 绘制窗体客户非客户区要用WM_PAINT和WM_NCPAINT

    窗体分为两部分:客户区(Client area)和非客户区(Non-Client area) WM_PAINT消息.OnPaint()方法.GetDC()API函数都是处理窗体客户区绘制的   而标题 ...

  6. php递归数组中的应用

    <?php $arr = array(array(1,2), array(3, 4), array(array(5, 6), array(7, 8)));function t($a){    i ...

  7. win8 + ubuntu14.04 安装步骤

    一.首先,从硬盘上划分一个空闲分区(推荐最少20G,每个人也可以按照自己的需要自行设定).记住各个分区的容量,方便安装时辨认.并从Ubuntu官方网站上下载Ubuntu 14.04 LTS 光盘镜像. ...

  8. 用gtest实现数据驱动的单元测试

    //使用gtest进行数据驱动的单元测试 #include <gtest/gtest.h> #include <iostream> #include <vector> ...

  9. debug(fmt,args...)调试

    1.定义宏(debug.h) #ifndef __DEBUG__H #define __DEBUG__H #include <stdio.h> #ifdef DEBUG #define d ...

  10. 编程思想—依赖注入(DI)并非实现控制反转(IOC)的最佳方法

    以构造函数注入为例: public class TestClass(IClassA a,IClassB b, IClassC C,IClassD d) { public void Method1() ...