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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
详解php命令注入攻击
2019/04/06 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
pycharm 安装JPype的教程
2019/08/08 Python
python 字典套字典或列表的示例
2019/12/16 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
外贸业务员的岗位职责
2013/11/23 职场文书
上学迟到的检讨书
2014/01/11 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python