JQuery插件开发示例代码

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);

赞 (0)

相关推荐

  • 详解jQuery插件开发方式

    详解jQuery插件开发方式

    jQuery插件开发  一般来说,jQuery插件的开发分为两种:一种是挂在jQuery命名空间下的全局函数,也可称为静态方法:另一种是jQuery对象级别的方法,即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法. 一.jQuery扩展 1.$.extend(object) 类似于.Net的扩展方法,用于扩展jQuery.然后就可以用$.的方式调用. $(function(){ $.extend({ fun1: function () { alert("为j

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

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

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

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

  • jQuery插件开发详细教程

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

  • jQuery插件开发基础简单介绍

    1.开发jQuery 插件的基本格式 复制代码 代码如下: (function ($) { $.extend($.fn, { }) })(jQuery) 2.开发全局函数的基本格式 复制代码 代码如下: (function ($) { $.extend($, { }) })(jQuery) 开发示例: 复制代码 代码如下: (function ($) { $.extend($, { subtract: function (a, b) { return a-b; } , add: function

  • 快速掌握jQuery插件开发

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

  • jquery插件开发注意事项小结

    jquery插件开发注意事项小结

    Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+).jQuery使用户能更方便地处理HTML documents.events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择.jQuery能够使用户的

  • jquery插件开发之实现md5插件

    方法返回的是一串十进制数,在jquery1.9.2下测试通过. 复制代码 代码如下: (function($){ $.md5 = function(o) {  if(null === o) {   return 'null';  }  if(typeof o != "string") {   return 'null';  }  //计算填充的长度  var fill_data_len = 0;  var data_len = o.length;  var d_l_mod = data

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

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

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

  • 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

随机推荐