jQuery 插件开发指南

那么首先我们来简单的看一下最正统的 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种开发方式都是最常用的，小伙伴们先好好学习下吧，后续我们再介绍的更深入些

赞 (0)

相关推荐

  • jquery 插件开发方法小结

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. 复制代码 代码如下: jQuery.fn = jQuery.prototype = { init: function( sel

  • jquery插件开发方法(初学者)

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. 复制代码 代码如下: jQuery.fn = jQuery.prototype = { init: function( sel

  • jQuery 插件开发 其实很简单

    jQuery 插件开发 其实很简单

    经常有人询问一些技巧,因此干脆写这么一篇文章给各位jQuery爱好者,算是抛砖引玉吧. [基础] a)样式 很多人会认为样式是个很复杂的东西,需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI,抛开图片设计不说,其实css也就是那么些属性:position,margin,padding,width,height,left,top,float,border,background... UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调.举个简单的例子,一个简单的页面,

  • jQuery插件开发的两种方法及$.fn.extend的详解

    jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 复制代码 代码如下: $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用: 复制代码 代码如下: var i = $.add(3,2); var j

  • 跟我一起学JQuery插件开发

    跟我一起学JQuery插件开发

    在逛codeproject网站的时候,突然看到一篇文章:How to write plugin in Jquery. 如果对E文好的同学 ,可以看上面的连接.现在我把上面网站的及结合自己的想法写这篇文章.希望能得到大牛们的支持和谅解...大鸟飞过...欢迎拍装.来源: [1]How to write plugin in Jquery. [2]锋利的JQuery  书 [3]RascallySnake的JQuery.extend()详解一.介绍 插件编写的目的是给已经有的一系列方法或函数做一个封装

  • jQuery 学习第七课 扩展jQuery的功能 插件开发

    jQuery 学习第七课 扩展jQuery的功能 插件开发

    jQuery的主体如下: (function(){ --})(); 对于Javascript基础不太好好的人来说比较奇怪.实际上,这个表达式声明了一个匿名函数(第一个括号),然后再执行它(第二个括号).在这个函数中,完成了jQuery一系列方法和对象的定义.第24行很关键, 复制代码 代码如下: jQuery = window.jQuery = window.$ = function( selector, context ) { // The jQuery object is actually

  • 基于Jquery插件开发之图片放大镜效果(仿淘宝)

    基于Jquery插件开发之图片放大镜效果(仿淘宝)

    需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法! 原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大图,并根据小图的坐标乘以大图除以小图得到的倍数定位!开始是把大图设为平铺不重复北景,然后使用背景的p

  • 跟我一起学写jQuery插件开发方法（附完整实例及下载）

    很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:"嗨,美女,用这个吧.这是我写的一个jQuery插件."我想基本上你的人生大事就能很快解决. 先想好做个什么功能 这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些.不要想一口就吃个胖子,咱也吃不了.咱还

  • jQuery插件开发详细教程

    扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 一.入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称: 复制代码 代码如下: jQuery.fn.myPlugin = function(){ //你自己的插件代码 }; 用户非常喜欢的$符号哪里去了? 它仍然存在,但是,为了避免和其他JavaScript库冲突,我们最好将jQuery传递

  • jQuery 插件开发指南

    那么首先我们来简单的看一下最正统的 jQuery 插件定义方式: 复制代码 代码如下: (function ($) {     $.fn.插件名 = function (settings) {         //默认参数         var defaultSettings = {           }         /* 合并默认参数和用户自定义参数 */          settings = $.extend(defaultSettings, settings);   return

  • jQuery插件开发精品教程(让你的jQuery更上一个台阶)

    jQuery插件开发精品教程(让你的jQuery更上一个台阶)

    刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发

  • jQuery插件开发精品教程让你的jQuery提升一个台阶

    jQuery插件开发精品教程让你的jQuery提升一个台阶

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,

  • jQuery插件开发的五种形态小结

    关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课.开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多.这里我把我自己总结出来的东西分享出来,帮助那些和我一样曾经遇到过同样问题的人. 我要做什么 我想要得到的javascript 插件应该会有以下几个特征 代码相对独立 链式操作 插件可配置 有可操作的方法,插件的生命周期可控制 配置可被缓存 可扩展 无冲突处理 事件代理,动态初始化 * 以下的代码均假设存在 jQuery 插件的第一形

  • 老司机带你解读jQuery插件开发流程

    jquery插件开发模式 jquery插件一般有三种开发方式: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 第一种$.extend()相对简单,一般很少能够独立开发复杂插件,第三种是一种高级的开发模式,本文也不做介绍.第二种则是一般插件开发用到的方式,本文着重讲讲第二种. 插件开发 第二种插件开发方式一般是如下定义 $.fn.pluginName = function() { //your

  • 快速掌握jQuery插件开发

    在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

  • JQuery插件开发示例代码

    JQuery 插件开发: 类级别开发,开发新的全局函数对象级别开发,给Jquery对象开发新方法一.类级别开发 -定义全局方法 复制代码 代码如下: jQuery.foo = function() {      alert('This is a test.');  }; 采用命名空间,可以避免命名空间内函数的冲突. 复制代码 代码如下: jQuery.apollo={      fun1:function(){          console.log('fun1');      },     

  • jQuery插件开发发送短信倒计时功能代码

    实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: <input type="button" class="sameBtn btnCur" value="发送验证码"/> <div class="sameBtn btnCur2">发送验证码</div>

随机推荐