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 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
JS解析XML实例分析
Jan 30 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 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
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
JavaScript效率调优经验
2009/06/04 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
Python实现XML文件解析的示例代码
2018/02/05 Python
全面分析Python的优点和缺点
2018/02/07 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python binascii 进制转换实例
2019/06/12 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python实现吃苹果小游戏
2020/03/21 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
预备党员入党自我评价范文
2014/03/10 职场文书
2014年绿化工作总结
2014/12/09 职场文书
委托书的样本
2015/01/28 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
MySQL锁机制
2021/04/05 MySQL