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 onpropertychange输入框 事件获取属性
Mar 26 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
Vue.use源码学习小结
Jun 20 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
一个用于MySQL的PHP XML类
2006/10/09 PHP
php连接mysql数据库代码
2009/03/10 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
js代码实现微博导航栏
2015/07/30 PHP
javascript new fun的执行过程
2010/08/05 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
Python 多线程的实例详解
2017/09/07 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
Django  ORM 练习题及答案
2019/07/19 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
超市业务员岗位职责
2013/12/05 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
教师考核材料
2014/05/21 职场文书
硕士学位论文评语
2014/12/31 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB