如何编写自己的jquery插件 Jquery的插件主要分为三类: 1、封装对象方法的插件:大部分插件都是封装对象的插件 2、封装全局函数的插件:将独立的函数添加到jquery的命名空间之下。Jquery.ajax()和jquery.trim()就是jquery内部作为全局函数的插件添加到内核上去的。 3、选择器插件:扩充自己喜欢的一些选择器。  编写Jquery插件的基本要点: 、一般命名的时候最好是按照jquery.[插件名].js命名。 、所有的对象都应当附加到jquery.fn对象上,所有的全局函数应该附加到jquery对象本身上 、通过this.each()来便利对象,这里的this指向的是当前选择器通过选择器获取的jquery对象 、所有的方法或者函数插件都要以分号结尾,否则压缩的话就会出现问题,有时候甚至要在头部也要加上“;”,以免不规范的代码给写的插件带来影响。 插件应当返回一个jquery对象,以便可以进行链式操作,除非你是要返回某个特定类型的参数,比如字符串和数组。 要注意$和jquery两个符号的冲入,可以利用闭包这种技术来回避这个问题。  允许使用内部函数,而且,这些内部函数可以访问他们所在的外部函数中声明的局部变量参数和声明的其他的内部函数,当其中一个这样的内部函数在包含他们的外部函数之外被调用时,就会形成闭包。  “闭包”是一个很复杂的概念,对于编写jquery插件其实是有一个模板的,这个模板中就有用到闭包的概念。  常见的jquery插件的都是有如下的格式的: ;(function($){     $.fn.yourName = function(options){  //各种属性、参数   }        var options = $.extend(defaults, options);//定义参数        this.each(function(){         //插件实现代码        });     }; })(jQuery); 注解: (1)、“;(function($){    })(jQuery);”使用了匿名函数,表示在方法体内的”$”表示的就是”jquery”,为了有更好的兼容性,所以在前面添加一个分号 ,这里的$符号是作为匿名函数的形参 (2)、$.extend(defaults, options);表示的是如果options中的参数总是有值的话,那么options中的值将会代替defaults中的值。举个例子来说: Var setting={validate:true,limit:5,name:foo}; Var options={validate:fasle,name:tom}; Var newoptions=$.extend(setting,options); 那结果就是newoptions={validate:false,limit:5,name:tom}. 所以Jquery.extend()(或者是$.extend())经常来设置插件的一些默认的参数。 还有就是$.extend()用来扩展方法,和jquery.fn.extend()一样都是可以的,他们的区别在于:前者不使用jquery的方法,而后者使用了jquery的方法,就像 addClass(),remove()等。所以可想而知大部分的现有插件都是jquery.fn.extend()进行扩展的。  function foo(options){   options=jquery.extend({   Name:“bar”,   Length:5,   dataType:”xml”   },options); }; 如果options参数传入的值为空,那么就可以使用默认设置的值。  例子: ;(function($)){   $.fn.extend({    “functionname”:function(options){//某个方法名   Options=$.extend({   odd:”odd”,   even:”even”   },options);   //可以通过options.元素名称来获取元素之,如options.odd   //some codes   $(“.table”).addClass(“”);//为某个元素添加样式等等   }   //一个方法结束   //另一个方法 this.cleartb = function() {//同时你也可以这么写,这里cleartb就是方法的名称     $('#emed_tb01').remove();//方法要做的事情 }   }); }  那我们在使用的时候就可以: $(“#id_”).cleartb();//选中id为“id_”的元素执行上面插件中的cleartb的方法。  下面给出一个完整的插件的例子供参考:这个插件是一个消息提示的插件,   ;(function($){     $.fn.manhuaTip = function(options) {//扩展函数manhuaTip         var defaults = {//默认值             Event : "click",             timeOut : 2000         };         var options = $.extend(defaults,options);//以传参覆盖         var $tip = $(this);//选定操作的jquery元素为当前选中的元素         $tip.live(options.Event,function(e){                 var type = $(this).attr('ty');                     var msg = $(this).attr('msg');               var tipHtml = '';             if (type =='loading'){                 tipHtml = '<img alt="" src="../images/loading.gif">'+(msg ? msg : '正在提交您的请求,请稍后...');             } else if (type =='notice'){                 tipHtml = '<span class="gtl_ico_hits"></span>'+msg             } else if (type =='error'){                 tipHtml = '<span class="gtl_ico_fail"></span>'+msg             } else if (type =='succ'){                 tipHtml = '<span class="gtl_ico_succ"></span>'+msg             }             if ($('.msgbox_layer_wrap')) {                                  $('.msgbox_layer_wrap').remove();             }             if (st){                 clearTimeout(st);             }             $("body").prepend("<div class='msgbox_layer_wrap'><span id='mode_tips_v2' style='z-index: 10000;' class='msgbox_layer'><span class='gtl_ico_clear'></span>"+tipHtml+"<span class='gtl_end'></span></span></div>");             $(".msgbox_layer_wrap").show();             var st = setTimeout(function (){                 $(".msgbox_layer_wrap").hide();                 clearTimeout(st);             },options.timeOut);         });         }       })(jQuery)

转载于:https://blog.51cto.com/3001448/1206171

[置顶]       编写自己的JQUERY插件相关推荐

  1. Sharepoint 2013 页面置顶(Topbar)小插件

    Sharepoint  2013 页面置顶(Topbar)小插件 需求分析:主页面上加入Topbar功能,当页面向下滚动了,就出现Topbar图标,回滚到页面顶部.但是,需求的母版页中有底边栏,当滚动 ...

  2. [置顶]信息发布系统 Jquery+MVC架构开发(4)Model 层

    下面开始在我们的解决方案里面增加实体. 这一层我个人感觉是跟数据库的映射层次,有了这一层,各层访问数据库会方便很多,不然的话得用DataSet或DataReader的直接访问了.理解为持久化对象就ok ...

  3. [置顶]信息发布系统 Jquery+MVC架构开发(7) Controller层

    Controller 这一层首先要添加对WCF 的引用: 如下,输入我们自己的wcf地址 http://localhost:8732/Design_Time_Addresses/InfoPub.BLL ...

  4. 自己动手丰衣足食之征服jQuery插件编写

    原文地址:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其 ...

  5. 教你开发jQuery插件(转)

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  6. hexo博客文章置顶功能实现的两种方法

    写在前面 本文主要描述了如何实现hexo文章置顶功能,讲述了通过修改源码和通过更改插件两种方式实现,以及如何添加置顶显示.文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文使用的东西 win10 ...

  7. [置顶]       推荐一款好用的jquery弹出层插件——wbox

    在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点和新版本增加的功能 wBox特点 背景透明度可以根据实际情况进行调节 可以根据需要添加wBox标 ...

  8. jQuery 使用 jQuery UI 部件工厂编写带状态的插件(翻译)

    首先,我们要创建一个progress bar,它只允许我们简单的设置进度值.正如我们接下来将要看到的,我们需要通过调用 jQuery.widget 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...

  9. php置顶功能代码,jquery实现页面置顶功能代码

    //获取页面的最小高度,无传入值则默认为600像素 min_height ? min_height = min_height : min_height = 600; //为窗口的scroll事件绑定处 ...

最新文章

  1. rhel6ACL权限
  2. SpringBoot项目打成jar包后,无法读取resources下的文件
  3. 苹果cms V10模板 仿优酷网PC模板+wap模板
  4. 博弈知识汇总(转自Tanky Woo),留着以后复习
  5. UE4下载与存储图片
  6. KITTI立体匹配数据集解析
  7. 多线程常见面试题(含常见项目遇到多线程问题解决及面试对话)
  8. taptap解析安装包出错_电脑上面怎么提取taptap游戏安装包 提取taptap里面游戏教程...
  9. 孙陶然:昆仑36条创业军规
  10. 真正的免费云时代来临,免费1T全能空间提供1T免费全能空间申请,
  11. 外贸企业邮箱那个好用,哪个企业邮箱最好用?
  12. html判断是否在微信里打开,JavaScript判断浏览器内核,微信打开自动提示在浏览器打开...
  13. SAS 系统全称为Statistics Analysis System
  14. manifest.json文件介绍
  15. 电子签名java上上签_电子签名怎么用才能合法合规呢?
  16. office软件的发展前景_2020年中国远程办公软件行业市场现状及发展前景分析
  17. java新浪微博客户端
  18. 人脸识别之人脸检测(二)--人脸识别样本制作及训练测试
  19. win10, net framework 3.5 安装报错0x800F081F
  20. 永中Office抢占政府正版化采购国产软件半壁江山

热门文章

  1. 解决wiremock中velocity脚本(.vm)中文编码乱码问题
  2. 前端vue项目执行npm install 报错cd() never called()
  3. jconsole工具监控java运行情况
  4. Oracle笔记(十四) 用户管理
  5. markdowndd
  6. (转)rtmp协议简单解析以及用其发送h264的flv文件
  7. poj 1390(消除方块(blocks))
  8. 转:SqlServer中的datetime类型的空值和c#中的DateTime的空值的研究
  9. P2502 [HAOI2006]旅行 最小生成树
  10. selenium自动加载Flash