jQuery 插件开发指南


Posted in Javascript onNovember 14, 2014

那么首先我们来简单的看一下最正统的 jQuery 插件定义方式:

(function ($) {     

$.fn.插件名 = function (settings) {         

//默认参数         

var defaultSettings = {

 

        }         /* 合并默认参数和用户自定义参数 */        

 

settings = $.extend(defaultSettings, settings);

 

return this.each(function () {             //代码         });   //插件在元素内多次出现

 

} })(jQuery);

 
先来看模板中的第一行代码(当然我们要把这一行代码的后半部分给揪出来一起看,不然第一行就完全无意义了):
(function ($) {

 

})(jQuery);

 这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解,将会对这种代码非常疑惑,那么强烈建议您阅读【详谈JavaScript 匿名函数及闭包】这篇文章。

jQuery 的继承方法 $.extend —— $.extend 在jQuery 插件开发中有个很重要的作用,就是用于合并参数。

$.fn.tip = function (settings) {     

var defaultSettings = {            

//颜色     

color: 'yellow',        

//延迟        

timeout: 200     }

 /* 合并默认参数和用户自定义参数 */   

settings = $.extend(defaultSettings, settings);    

alert(settings.input); <br>}

 jQuery 插件定义第二种方式:

(function ($) {

    //插件定义--更换名字

    $.fn.tabpanel = function (method) {

        var methods = $.fn.tabpanel.methods;

        if (methods[method]) {

            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));

        } else if (typeof method === 'object' || !method) {

            return methods.init.apply(this, arguments);

        } else {

 

        }

    }

    //支持的方法

    $.fn.tabpanel.methods =

    {

        //初始化

        init: function (p_options) {

            tabpanelBind(p_options, this);

        },

        add: function (p_options) {

            addTab(p_options, this);

            tabpanelBind(p_options, this);

            // debugger

        }    }

    function add(p_options) {

        var _defaults = {

            id: ""

        }

    <br>
//内部实现略.........<br>        return _index;

    }

<br>})(jQuery);<br><br>调用  $("#team").tabpanel('add',"");

好了,上面介绍的这2种开发方式都是最常用的,小伙伴们先好好学习下吧,后续我们再介绍的更深入些

Javascript 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
js post提交调用方法
Feb 12 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
Mac下安装vue
Apr 11 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
使用JavaScript和C#中获得referer
Nov 14 #Javascript
JavaScript window.location对象
Nov 14 #Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 #Javascript
详谈JavaScript内存泄漏
Nov 14 #Javascript
js与C#进行时间戳转换
Nov 14 #Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 #Javascript
使用node.js 制作网站前台后台
Nov 13 #Javascript
You might like
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
PHP_MySQL教程-第一天
2007/03/18 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
php实现点击可刷新验证码
2015/11/07 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python日期的加减等操作的示例
2017/08/15 Python
Python代码实现KNN算法
2017/12/20 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
Django 路由层URLconf的实现
2019/12/30 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
竞选大队长演讲稿
2014/04/29 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers