jQuery插件扩展测试实例


Posted in Javascript onJune 21, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
早该知道的7个JavaScript技巧
Mar 27 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 Javascript
早该知道的7个JavaScript技巧
Jun 21 #Javascript
BootStrap实现树形目录组件代码详解
Jun 21 #Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 #Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 #Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 #Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 #Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 #Javascript
You might like
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
PHP数组操作类实例
2015/07/11 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
jquery无缝图片轮播组件封装
2020/11/25 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
小程序实现分类页
2019/07/12 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
python numpy格式化打印的实例
2018/05/14 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python爬虫之自制英汉字典
2019/06/24 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
python中字典增加和删除使用方法
2020/09/30 Python
python实现学生通讯录管理系统
2021/02/25 Python
电大自我鉴定范文
2013/10/01 职场文书
中学门卫岗位职责
2013/12/26 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
岳麓书院导游词
2015/02/03 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
Python面向对象编程之类的概念
2021/11/01 Python