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

  jQuery.fn

jQuery.fn = jQuery.prototype = {
    init: function( selector, context ) {

      //….

      //……

      }
  };

  可以看出, jQuery.fn = jQuery.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
  Object jQuery.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 );

转载于:https://www.cnblogs.com/cemaster/p/5984544.html

jQuery基础集锦——插件开发相关推荐

  1. 【Java Web开发指南】JQuery基础笔记

    文章目录 JQuery 基础: 1. JQuery 基础:1. 概念2. 快速入门3. JQuery对象和JS对象区别与转换4. 选择器5. DOM操作6. 案例 JQuery 基础: 1. 概念: ...

  2. Jquery基础之DOM操作

    Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...

  3. Ajax、jQuery基础入门视频教程

    关注公众号,免费获取资料 本视频是Ajax和jQuery基础入门视频,该视频针对接触过javaScript基础的学员录制,授课讲究通俗易懂.通过该视频的学习,相信您能够轻轻松松地掌握Ajax和jQue ...

  4. jQuery小测试系列之jQuery基础知识

    日期:2012-4-17  来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识. 来源:jQuery小测试系列之jQuery基础知识

  5. JQuery-学习笔记04【基础——JQuery基础案例】

    Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...

  6. JQuery-学习笔记01【基础——JQuery基础】

    Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...

  7. 06 Jquery 基础

    06 Jquery 基础 前端学习之jquery: jQuery:一个库 Jquery的基础语法: $(selector).action() 基本选择器: <script>//基本选择器/ ...

  8. java与jquery的选择器区别_java day44【JQuery 基础:概念,快速入门,JQuery对象和JS对象区别与转换,选择器,DOM操作,案例】...

    第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...

  9. java jquery基础_day20:JQuery基础(超系统的JavaWEB全套教程)

    今日内容 1.JQuery 基础: 概念 快速入门 JQuery对象和JS对象区别与转换 选择器 DOM操作 案例 JQuery 基础: 1.概念: 一个JavaScript框架.简化JS开发 jQu ...

  10. 《jQuery基础》总结

    目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的<jQuery基础>(jQuery Fundamentals).这本书虽然是入门教材,但也足足有100多页.我 ...

最新文章

  1. Linux最大打开文件描述符数
  2. [PWA] Show Notifications when a Service Worker is Installed or Updated
  3. SpringBoot+Vue 完整的外卖系统,手机端和后台管理,可以玩一下!
  4. 【STM32】DAC相关函数和类型
  5. 程序员偷偷深爱的9个不良编程习惯
  6. 非插件实现回复可见效果
  7. tidb时间转字符串_如何使用TiDB节省时间
  8. 响应式API的设计、实现和应用
  9. 实现c++BMP图像的读取合成拆解加边框
  10. linux 新老软件切换,Linux下非常重要的软件切换命令
  11. stm32移植paho_paho.mqtt.c开源代码的ARM移植
  12. 卡巴斯基企业版本杀毒软件防火墙,支持windows服务器系统安装
  13. 南京毕业生租房补贴发票开具地点一览表
  14. python录音功能,python实现录音功能可随时停止录音代码
  15. 【无标题】研究过程中的一些经验感悟
  16. 数字分割(拆数字)的两种方法
  17. 洗车行业可以使用会员管理系统吗?
  18. Linux 基础命令入门 文件压缩
  19. C认证笔记 - 计算机通识 - 进制转换
  20. 第五届“泰迪杯”数据分析技能赛

热门文章

  1. 当局为器,人民为水。当局什么样,人民就什么样
  2. 博客V7之后,喜庆排名进入2000之内
  3. 管理感悟:出了事故,关键是想想自己哪里能改进
  4. 移动通信matlab实现,现代移动通信中的调制技术研究及Matlab实现
  5. Windows下,Unicode、UTF8,GBK(GB2312)互转
  6. mysql 重放binlog_【MySQL】老版本重放binlog的罕见报错
  7. ecs服务器配置git_ecs安装git
  8. 服务器修改lang值,golang设置http response响应头与填坑记录
  9. html5植物生长,关于植物生长的知识
  10. Oracle1518,redhat 5.4 Oracle 10g r2