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 相关文章推荐
让textarea自动调整大小的js代码
Apr 12 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
es6 for循环中let和var区别详解
Jan 12 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
PHP新手上路(十三)
2006/10/09 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
JavaScript函数详解
2014/11/17 Javascript
JS获取时间的方法
2015/01/21 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
JS原型链怎么理解
2016/06/27 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
vue.js的提示组件
2017/03/02 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
python迭代器常见用法实例分析
2019/11/22 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
yy婚礼司仪主持词
2014/03/14 职场文书
总经理任命书范本
2014/06/05 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
营运督导岗位职责
2015/04/10 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
五一放假通知怎么写
2015/08/18 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
css样式important规则的正确使用方式
2022/06/10 HTML / CSS