参考文档:http://www.cnblogs.com/Dlonghow/p/4142034.html

编写插件最先接触到的就是jQuery.fn.extend 和jQuery.extend 这个两个属性,但是这两个东西是什么,干啥用的,还得先明白:

1、jQuery.extend(object)

  a)、为jQuery添加静态方法

    eg : 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

  b)、jQuery.extend(target,object1,[objectN]) 用一个对象或多个对象来扩充对象,最后返回扩充的对象

    eg:

      var target = {
        name : 'zt',
        age  : 24
      }
      var object1 = {
        name : 'zj',
        age : '28',
        address : 'ly'
      }
      console.log(jQuery.extend(target,object1));  // {name:'zj',age:'28',address:'ly'};

2、jQuery.fn.extend(object);

  $.fn是什么?

  $.fn是指jQuery的命名空间,fn上的成员(方法function及属性property),会对jQuery实例每一个有效。

  

  查看jQuery代码,就不难发现。

  jQuery.fn = jQuery.prototype = {

     init: function( selector, context ) {//.... 

  };

  原来 jQuery.fn = jQuery.prototype.

  所以,它是对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

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

  $.fn.extend({          
       doAlertWhileClick:function() {            
            $(this).click(function(){                 
                    alert($(this).val());           
              });           
        }       
  });       
  $("#input1").doAlertWhileClick(); // 页面上为:

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

3、在实际的开发项目中:{pluginName为插件名称}

  开发插件,是$.fn.pluginName = function(options){  }; 如果pluginName 为变量, 则写成 $.fn[pluginName] = function(options){  }

  第一步:定一个闭包区域,防止插件被污染

;(function ($, window,undefined) {  //传入window,不需要去外部寻找,提高效率 ; undefined ,防止外部声明,影响内部变量

})(window.jQuery, window);

  第二步:写入插件方法:

;(function ($, window,undefined) {  //传入window,不需要去外部寻找,提高效率 ; undefined ,防止外部声明,影响内部变量
  $.fn[pluginName] = function(options){
  return this.each(function(){       }) //支持链式调用
  }
})(window.jQuery, window);

jQ插件编写的更多相关文章

  1. 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  2. jQuery插件编写学习中遇见的问题--attr prop

    个人博客: https://chenjiahao.xyz 最近在学习jQuery的插件的编写,有两种方式,$.fn.extend以及$.extend,一种是作用于对象原型上,一种是直接作用于jQuer ...

  3. jQuery插件编写及链式编程模型小结

    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...

  4. Wireshark插件编写

    Wireshark插件编写 在抓包的过程中学习了使用wireshark,同时发现wireshark可以进行加载插件,便在网上学习了一下相应的插件开发技术. 需求编写一个私有协议名为SYC,使用UDP端 ...

  5. typecho插件编写教程1 - 从HelloWorld说起

    typecho插件编写教程1 - 从HelloWorld说起 老高 187 5月25日 发布 推荐 0 推荐 收藏 2 收藏,189 浏览 最近老高正在编写一个关于typecho的插件,由于typec ...

  6. JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)

    前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下:       一.fla ...

  7. jq插件处女座 图片轮播

    好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...

  8. jq插件第二款来袭 图片滚动

    这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...

  9. 【jQuery】使用JQ来编写面板的淡入淡出效果

    本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...

随机推荐

  1. php,ajax登陆退出

    利用ajax可以做到页面无刷新登陆. 运行效果 目录结构 site/ css/ images/ js/ site/css/bootstrap.css(bootstrap样式表) site/js/boo ...

  2. vb.net常用函数

    当然,这些都可以从MSDN查到,但是有时候打开帮助老慢的,所以先放到这里放一放,查个函数什么的比较快一点.都是从网上搜来的.Abs(number) 取得数值的绝对值. Asc(String) 取得字符 ...

  3. php获取post参数的几种方式

    php获取post参数的几种方式 1.$_POST['paramName'] 只能接收Content-Type: application/x-www-form-urlencoded提交的数据 2.fi ...

  4. Oracle EBS DBA常用SQL - 安装/补丁【Z】

    Oracle EBS DBA常用SQL - 安装/补丁 检查应用补丁有没有安装:select bug_number,last_update_date from ad_bugs where bug_nu ...

  5. 获取UIButton的一些属性

    获取文字  button.currentTitle 更多如下: @property(nullable, nonatomic,readonly,strong) NSString *currentTitl ...

  6. jquery 获取当前元素的索引值

    $("#lisa > li").mouseover(function(){ alert($("#lisa > li").length); alert ...

  7. 有关MyISAM引擎的锁定机制

    本文介绍下,mysql数据库中MyISAM引擎的锁定机制的相关知识,感兴趣的朋友可以参考下. 本节内容: MyISAM引擎的锁定机制 在mysql数据库中,MyISAM存储引擎适合于读频率远大于写频率 ...

  8. win7 64位安装 oracle 11G 和 使用 PLSQL Developer 连接服务器

    其实基本过程和网上大多数人的完全一样,只是后面的plsql上加了几张图片而已,以此给自己做个记录,万一网上的没了,这里自己还有,会了的大森(大神),就请路过吧 1.双击开始安装

  9. 幻世(OurDream)2D图形引擎大更新——炫丽粒子特效强势回归!

    本次更新终于让各位期待已久的绚丽粒子系统特效强势回归到幻世当中了.凭借新引擎强大而又高效的绘图,新的粒子系统将比旧有版本(原Ycnd 2D)在性能上有极大幅度的增强,增幅超过十倍! 更强的性能!更好的 ...

  10. Latex笔记-基本布局

    转自https://linhan.blog.ustc.edu.cn/?p=135&cpage=1 目录改用中文标题并且居中 \renewcommand{\contentsname}{\cent ...