本文转自:http://www.cnblogs.com/wyjgreat/archive/2011/07/19/2110754.html

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

JavaScript代码

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

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

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

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

JavaScript代码

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

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

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

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

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

XML/HTML代码

  • $.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类的实例可以使用这个“成员函数”。

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

JavaScript代码
  • $.fn.extend({
  • alertWhileClick:function(){
  • $(this).click(function(){
  • alert($(this).val());
  • });
  • }
  • });
  • $(“#input1″).alertWhileClick(); //页面上为:<input id=”input1″ type=”text”/>

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

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

注意:

在这里还有一个特殊的地方,就是在函数开头的地方有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插件创建 jquery.fn.extend与jquery.extend的更多相关文章

  1. jQuery插件实现图片展开效果,jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  2. 自己做jQuery插件:将audio5js封装成jQuery语音播放插件

    日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装. 首先先简单介绍一下Audio5js吧. Audio5js是一个能够 ...

  3. jquery插件的2种扩展开发(jQuery.extend和jQuery.fn.extend的区别)

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

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

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

  5. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  6. jQuery 插件基础

    jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...

  7. jQuery 插件编程精讲与技巧

    适应的读者: 1.有一定的jquery编程基础但是想在技能上有所提升的人 2.前端开发的程序员 3.对编程感兴趣的学生 为什么要学习jquery插件的编写? 为什么要学习jquery插件的编写?相信这 ...

  8. jQuery插件实践之轮播练习(一)

    所有文章搬运自我的个人主页:sheilasun.me 因为从来没写过jQuery插件,所以本文要通过一个轮播的例子,练习jQuery插件的写法. 新建插件文件 在讨论细节之前,先新建插件文件(当然也可 ...

  9. jQuery插件——下拉选择框

    其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...

随机推荐

  1. Python--面向对象编程--时钟实例开发

    在学习python面向对象编程的时候,心血来潮,决定写一个时钟模型来玩玩,所以就有了现在这个小玩意,不过python这个东西确实是挺好玩的 方法:运用python的tkinter库开发图形化时钟程序 ...

  2. 在robotframework里面,怎么在已有的字典中加一个键值对呢

  3. SQL Server之XML PATH()

    )='SYS20130228000000012'; SELECT ',' + MedicineTypeID FROM Dic_Res_StoreToType b WHERE b.MedicalInst ...

  4. 动态绑数据(Repeater控件HeaderTemplate和ItemTemplate)

    前几天,Insus.NET有写了<动态绑数据(GridView控件Header和ItemTemplate)>http://www.cnblogs.com/insus/p/3303192.h ...

  5. epoll简介

    1.epoll简介 epoll是I/O事件通知工具,与select/poll相比,epoll最大的好处在于它不会随着监听fd数目的增长而效率降低.epoll API既可以用作edge触发的接口,也可以 ...

  6. A Plug for UNIX UVA - 753(网络流)

    题意:n个插座,m个设备及其插头类型,k种转换器,没有转换器的情况下插头只能插到类型名称相同的插座中,问最少剩几个不匹配的设备 lrj紫书里面讲得挺好的. 先跑一遍floyd,看看插头类型a能否转换为 ...

  7. Ubuntu1804登录界面闪退

    目前主力机操作系统已经由Ubuntu 16.04 lts升级到Ubuntu 18.04 lts.由于是跨版本升级过来,而且由unity(个人觉得挺好)替换成了gnome3,经常出点小问题.这次由于安装 ...

  8. P3241 [HNOI2015]开店 动态点分治

    \(\color{#0066ff}{ 题目描述 }\) 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱. 这样的想 ...

  9. kuangbin专题十六 KMP&&扩展KMP HDU2609 How many (最小字符串表示法)

    Give you n ( n < 10000) necklaces ,the length of necklace will not large than 100,tell me How man ...

  10. linux1--常用命令

    1.目录结构 2./etc:系统配置文件存放地 比如你的wsgi的配置文件,nginx 3./usr 应用程序存放地 比如你的jdk应用程序存放地 4./root 系统管理员root的家目录 4.1像 ...