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 相关文章推荐
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
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分页显示制作详细讲解
2006/12/05 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
php重定向的三种方法分享
2012/02/22 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python常用函数与用法示例
2019/07/02 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
应届生污水处理求职信
2013/11/06 职场文书
市场部专员岗位职责
2013/11/30 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
后进生评语大全
2015/01/04 职场文书
医院营销工作计划
2015/01/16 职场文书
开票员岗位职责
2015/02/12 职场文书
出纳岗位职责范本
2015/03/31 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
获奖感言怎么写
2015/07/31 职场文书