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 相关文章推荐
JavaScript的类型简单说明
Sep 03 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
关于JS中prototype的理解
Sep 07 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 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
使用Yii2实现主从数据库设置
2016/11/20 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python算法应用实战之栈详解
2017/02/04 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
numpy库reshape用法详解
2020/04/19 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
养殖人员的创业计划书范文
2013/12/26 职场文书
新学期开学标语
2014/06/30 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
地陪导游欢迎词
2015/01/26 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js