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 Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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
Smarty日期时间操作方法示例
2016/11/15 PHP
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
Django时区详解
2019/07/24 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
初中毕业生的自我评价
2014/03/03 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
党校学习党性分析材料
2014/12/19 职场文书
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫