JQuery插件开发示例代码


Posted in Javascript onNovember 06, 2013

JQuery 插件开发:
类级别开发,开发新的全局函数
对象级别开发,给Jquery对象开发新方法
一、类级别开发 -定义全局方法

jQuery.foo = function() {  
    alert('This is a test.');  
};

采用命名空间,可以避免命名空间内函数的冲突。
jQuery.apollo={  
    fun1:function(){  
        console.log('fun1');  
    },  
    fun2:function(){  
        console.log('fun2');  
    }  
} 

二、对象级别开发 -定义jQuery对象方法 

(function($) {     
$.fn.pluginName = function() {   };   
})(jQuery);  
//插件通过这样被调用:  
$('#myDiv').pluginName(); 

接受options参数以控制插件的行为
(function($){  
    $.fn.fun2=function(option){  
        var defaultOption={  
            param1:'param1',  
            param2:'param2'  
        }  
        $.extend(defaultOption,option);  
        console.log(defaultOption);  
    }  
})(jQuery);  
$(function(){  
    //通过这样调用  
    $("body").fun2({  
        param1:'new Param1'  
    });  
}); 

保持私有函数的私有性
 (function($) {    
  // plugin definition    
  $.fn.hilight = function(options) {    
    debug(this);    
    // ...    
  };    
  // private function for debugging  
  //“debug”方法不能从外部闭包进入,因此对于我们的实现是私有的。  
  function debug($obj) {    
    if (window.console && window.console.log)    
      window.console.log('hilight selection count: ' + $obj.size());    
  };    
//  ...    
})(jQuery); 
Javascript 相关文章推荐
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
javascript中的面向对象
Mar 30 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
JS+CSS实现动态时钟
Feb 19 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
javascript实现yield的方法
Nov 06 #Javascript
Javascript事件实例详解
Nov 06 #Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 #Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 #Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 #Javascript
浅析Js中的单引号与双引号问题
Nov 06 #Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 #Javascript
You might like
又一个php 分页类实现代码
2009/12/03 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
PHP错误处理函数
2016/04/03 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
详解Python time库的使用
2019/10/10 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
无传销社区工作方案
2014/05/13 职场文书
门店业绩提升方案
2014/06/08 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
2014年保育员工作总结
2014/12/02 职场文书
介绍长城的导游词
2015/01/30 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android