JQuery插件开发示例代码

 更新时间:2013年11月06日 17:05:33   作者:  
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); 

相关文章

  • 基于jQuery Circlr插件实现产品图片360度旋转

    基于jQuery Circlr插件实现产品图片360度旋转

    Circlr是一款可以对产品图片进行360度全方位旋转展示的jQuery插件,本文给大家分享一款基于jQuery Circlr插件实现产品图片360度旋转,大家一起来看看吧
    2015-09-09
  • 使用jQuery轻松实现Ajax的实例代码

    使用jQuery轻松实现Ajax的实例代码

    在Asp.Net的MVC架构中使用jQuery是一件很容易的事情,而使用jQuery实现Ajax更加简单。
    2010-08-08
  • Jquery 数据选择插件Pickerbox使用介绍

    Jquery 数据选择插件Pickerbox使用介绍

    目前市面上很少见或几乎没有这数据(对象)选择插件.比如,点击input , select 元素时弹出div(窗口),载入数据让用户选择数据,选择后在填充回对应的元素.
    2012-08-08
  • jquery插件Jplayer使用方法简析

    jquery插件Jplayer使用方法简析

    这篇文章主要介绍了jquery插件Jplayer使用方法简析,具有实用价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • jquery Validation表单验证使用详解

    jquery Validation表单验证使用详解

    功能强大的 jquery 表单验证插件,适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则。兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+
    2015-04-04
  • jQuery中[attribute=value]选择器用法实例

    jQuery中[attribute=value]选择器用法实例

    这篇文章主要介绍了jQuery中[attribute=value]选择器用法,实例分析了[attribute=value]选择器的功能、定义及给定属性及属性值元素的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 解决jquery中美元符号命名冲突问题

    解决jquery中美元符号命名冲突问题

    在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,下面为大家介绍下如何解决jquery中美元符号命名冲突问题
    2014-01-01
  • jQuery实现左侧导航模块的显示与隐藏效果

    jQuery实现左侧导航模块的显示与隐藏效果

    这篇文章主要介绍了jQuery实现左侧导航模块的显示与隐藏效果,涉及jQuery相应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
    2016-07-07
  • jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】

    jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】

    这篇文章主要介绍了jQuery实现的鼠标拖动画矩形框,结合实例形式分析了jQuery基于事件响应及页面元素属性动态操作实现的图形绘制相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • jQuery+slidereveal实现的面板滑动侧边展出效果

    jQuery+slidereveal实现的面板滑动侧边展出效果

    WEB开发中有时需要在页面上设置一个控制面板,默认是不显示的,当用户有需要时可以通过按钮触发调用面板展示。常见的有页面侧边滑出面板效果。本文将使用jQuery插件并结合实例给大家介绍一下面板滑动展示效果。
    2015-03-03

最新评论