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 相关文章推荐
超级简单的jquery操作表格方法
Dec 15 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
Angular实现form自动布局
Jan 28 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
js实现无缝轮播图
Mar 09 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
聊天室php&amp;mysql(五)
2006/10/09 PHP
PHP中的正规表达式(二)
2006/10/09 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
打包发布Python模块的方法详解
2016/09/18 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
入党转预备思想汇报
2014/01/07 职场文书
开业庆典策划方案
2014/02/18 职场文书
大学生党员承诺书
2014/05/20 职场文书
升学宴演讲稿
2014/09/01 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python