脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery插件扩展

jQuery插件扩展测试实例

 更新时间：2016年06月21日 11:20:20   作者：cherry  
这篇文章主要介绍了jQuery插件扩展方法,结合一个动态改变元素样式功能实例分析了jQuery插件扩展的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery插件扩展测试方法。分享给大家供大家参考，具体如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JQquery扩展插件测试</title>
  <script type = "text/javascript" src="jquery-1.7.2.min.js"> </script>
  <style type = "text/css">
   .a{
    background:#ccc;
   }
   .b{
    background:#555;
   }
  </style>
  <script type = "text/javascript">
  //1.对象级别的扩展 jQuery.fn是jQuery.prototype的别名
  // 注意:在对象方法内，关键字this引用的是一个jQuery对象，但在每次调用的.each()方法中，this引用的是一个dom元素（所以each内部要用jQuery包装this,而在return后面，直接调用jQuery对方法.each()）
  (function($){
   $.fn.toggleClass = function(options){
    return this.each(function(){
     var opts = $.extend({},$.fn.toggleClass.defaults,options);
     var $element = $(this);
     if($element.hasClass(opts.class1)){
      $element.removeClass(opts.class1).addClass(opts.class2);
     }else if($element.hasClass(opts.class2)){
      $element.removeClass(opts.class2).addClass(opts.class1);
     }
    })
   }
   $.fn.toggleClass.defaults = {
    class1:"",
    class2:""
   }
   $.fn.setBorder = function(){
    return this.each(function(){
     $(this).css("border","1px solid red");
    })
   }
  })(jQuery);
  $(function(){
   var opts = {
     class1:"a",
     class2:"b"
    }
   $("h1").click(function(){
    $("h1").toggleClass(opts).setBorder();
   })
  })
  //2.类级别的扩展
   //1).直接添加：为jQuery对象添加全局函数
   jQuery.sum = function(array){
    var total = 0;
    jQuery.each(array,function(idx,num){
     total += num;
    })
    return total;
   }
   //2).用extend添加：
   jQuery.extend({
    fn1:function(){},
    fn2:function(){}
   })
  </script>
 </head>
 <body>
  <h1 id = "h1" class = "a">JQuery扩展测试</h1>
 </body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • jQuery实现圣诞节礼物动画案例解析

    jQuery实现圣诞节礼物动画案例解析

    这篇文章主要介绍了jQuery实现圣诞节礼物动画案例解析的相关资料,需要的朋友可以参考下
    2016-12-12
  • 用JQuery 实现AJAX加载XML并解析的脚本

    用JQuery 实现AJAX加载XML并解析的脚本

    用JQuery 实现AJAX加载XML并解析的脚本
    2009-07-07
  • 深入理解(function(){... })();

    深入理解(function(){... })();

    很多朋友不清楚(function(){... })();这几种写法各代表是什么意思，下面小编通过本教程给大家简单介绍下(function(){... })();知识，感兴趣的朋友跟着小编一起学习吧
    2016-08-08
  • 使用CSS样式position:fixed水平滚动的方法

    使用CSS样式position:fixed水平滚动的方法

    这篇文章主要介绍了使用CSS样式position:fixed水平滚动的方法,需要的朋友可以参考下
    2014-02-02
  • jQuery学习笔记 操作jQuery对象 CSS处理

    jQuery学习笔记 操作jQuery对象 CSS处理

    在对class属性的操作中，实际上已经改变元素样式了，但这些都是根据已设定的CSS规则间接生效的。因此我们有必要使用更为直接的方式来改变原先设定好了的CSS规则
    2012-09-09
  • jQuery包裹节点用法完整示例

    jQuery包裹节点用法完整示例

    这篇文章主要介绍了jQuery包裹节点用法,结合完整实例形式分析了jQuery中wrap方法包裹节点的使用技巧,注释中还包含了wrapAll与wrapInner方法的使用,需要的朋友可以参考下
    2016-09-09
  • jquery dataTable 获取某行数据

    jquery dataTable 获取某行数据

    本篇文章主要介绍了jquery dataTable 获取某行数据的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-05-05
  • jQuery层级选择器实例代码

    jQuery层级选择器实例代码

    这篇文章主要为大家详细介绍了jQuery层级选择器实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jquery实现拖拽添加元素功能

    jquery实现拖拽添加元素功能

    这篇文章主要为大家详细介绍了jquery实现拖拽添加元素功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • jQuery实现的浮动层div浏览器居中显示效果

    jQuery实现的浮动层div浏览器居中显示效果

    这篇文章主要介绍了jQuery实现的浮动层div浏览器居中显示效果,涉及jQuery及JS动态操作页面元素与属性相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2017-02-02

最新评论