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下的keyCode键码值表
Apr 10 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
AngularJS与后端php的数据交互方法
Aug 13 Javascript
微信小程序自定义导航栏
Dec 31 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中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
python for循环remove同一个list过程解析
2019/08/14 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
美术毕业生求职信
2014/02/25 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android