如何编写自己的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. CodeForces - 555A Case of Matryoshkas(思维)
  2. 从Golang调度器的作者视角探究其设计之道!
  3. ai算子是什么_隐私AI框架中的数据流动与工程实现
  4. linux提示桌面正在处理文件,linux系统下桌面配置文件.desktop的几个小问题
  5. Android自定义View【实战教程】6⃣️---深入理解 Android 中的 Matrix
  6. php手册 下载,php手册chm
  7. Reac版本的Ant Design树形控件的使用、搜索关键字标红、只显示搜索匹配中的数据
  8. matlab画微分方程的矢量场图_一维波动方程数值解 Matlab 教程(从入门到出图)——3数值计算的Matlab实现...
  9. 改善记忆力的二十种记忆方法,随便你挑!
  10. Openlayers 快速上手教程
  11. 【矩阵论】4. 矩阵运算——广义逆——加号逆应用
  12. unknown类型的使用
  13. html如何设置多级列表,如何在Word文档中设置多级列表
  14. 泛函分析笔记(三) 拓扑空间的基本概念
  15. C++三只小猪称体重(比较最大值)
  16. 2020工程伦理(清华版)期末考试参考答案
  17. 魔兽世界WOW私服架设详细教程
  18. 快慢指针(删除数组重复项)
  19. 【网络】无线路由器的AP、Client、WDS、WISP使用功能图解(清晰明了)
  20. 怎样防止苹果系统更新_【干货】安卓系统防止更新时丢失账号

热门文章

  1. 学习笔记之-MySql高级之sql优化
  2. SDNU 1103.买彩票(水题)
  3. 【linux杂谈】查看centOS系统的版本号和内核号
  4. Cisco配置单臂路由及静态路由
  5. Android Studio 中快速提取方法
  6. poj1182(食物链)续
  7. 使用IntelliJ IDEA11创建Java Web程序
  8. 无法在 COM+ 目录中安装和配置程序集 microsoft.sqlserver.notificationservices.dll
  9. 小白自学Java框架,框架的全面解析总结
  10. IIS7下使用urlrewriter.dll配置