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

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 当前编辑框里的内容。可以这么做:

复制代码
代码如下:
$.fn.extend({

alertWhileClick:function(){
$(this).click(function(){

alert($(this).val());
});
}
});

$("#input1").alertWhileClick(); //页面上为:<input id="input1"
type="text"/> 

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

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

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

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

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

  9. 利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系

      利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...

随机推荐

  1. Mac系统如何配置adb

    在使用mac进行android开发之前,我们一般会安装android studio 或者 eclipse,无论哪一款开发软件,都少不了安装adb(Android Debug Bridge).adb(A ...

  2. UVA 10078 The Art Gallery

    Problem: Century Arts has hundreds of art galleries scattered all around the country and you are hir ...

  3. poj 3009 Curling 2.0

    题目来源:http://poj.org/problem?id=3009 一道深搜题目,与一般搜索不同的是,目标得一直往一个方向走,直到出界或者遇到阻碍才换方向. 1 #include<iostr ...

  4. 树链剖分入门-Hdu3966 Aragorn's Story

    AC通道:http://acm.hdu.edu.cn/showproblem.php?pid=3966 [题目大意] 一棵树上每个点有权值,每次支持三种操作:给[a,b]路径上的所有节点的权值加上k, ...

  5. nsight 使用问题

    slot 0 offset 0 stride DXGI_FORMAT_r32b32g32_FLOAT 这样一个memory 100.0000, 100.0000,10.0000,1.0000 stri ...

  6. 【转载】一淘技术专家王晓哲:Nginx_lua的测试及选择

    对于Web高性能服务器上的选择,这个是很多人头痛的问题.其实Apache.lighttpd.Nginx都用他们优点,在什么情况下我们如何去选择适合自己的Web高性能服务器,如何去搭建一个适合自己的架构 ...

  7. 手写PE文件(二)

    [文章标题]: 纯手工编写的PE可执行程序 [文章作者]: Kinney [作者邮箱]: mohen_ng@sina.cn [下载地址]: 自己搜索下载 [使用工具]: C32 [操作平台]: win ...

  8. hadoop-ha QJM架构应用故障总结

    部署hadoop-ha QJM架构过程我就不说了,参考 我的博客:hadoop-ha QJM架构部署故障一:    namenode 报错日志如下: WARN org.apache.hadoop.hd ...

  9. Log4Net 全方位跟踪程序运行

    原文:http://kb.cnblogs.com/page/100968/ 1.Log4Net 简单使用 使用Log4net必须引入log4net.dll 文件,因为log4net 是开源的,所以可以 ...

  10. 就地交叉数组元素[a1a2b1b2]->[a1b1a2b2]

    问题描述: If [a1,a2,a3...,an,b1,b2...bn] is given input change this to [a1,b1,a2,b2.....an,bn] , solutio ...