jquery采用oop模式class类的使用示例


Posted in Javascript onJanuary 22, 2016

本文实例讲述了jquery采用oop模式class类的使用方法。分享给大家供大家参考,具体如下:

这里用class来管理jquery的各个function,我觉得很方便,并且代码可读性也很强。以前我喜欢建文件写function,再包括文件,到后来找一个function就比较麻烦了。没有用class来管理function方便。费话不多说了。

一、oop.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" lang="utf-8"><head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>ooptest</title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="oop.js"></script>
 </head>
 <body>
 <br><br>
 <center>
 访问<a href="https://3water.com">三水点靠木</a>
 </center>
 <br><br>
 <div>
 名字: <input name="Name" id="Name" type="text" value="请输入中文名字" notice="请输入中文名字" >
 </div>
 <div></div>
 区域选择: <select name="RegionId" id="RegionId" >
 <option value="0" selected="selected">行政区选择</option>
 <option value="12">浦东新区</option>
 <option value="42">松江区</option>
 <option value="41">金山区</option>
 <option value="40">崇明区</option>
 <option value="39">青浦区</option>
 <option value="37">静安区</option>
 <option value="36">徐汇区</option>
 <option value="35">长宁区</option>
 <option value="34">虹口区</option>
 <option value="33">闸北区</option>
 <option value="32">宝山区</option>
 <option value="31">嘉定区</option>
 <option value="30">闵行区</option>
 <option value="29">普陀区</option>
 <option value="28">卢湾区</option>
 <option value="27">黄浦区</option>
 <option value="26">杨浦区</option>
 <option value="43">奉贤区</option>
 </select>
 </body>
 <html>
 <script type="text/javascript">
 $(document).ready(function(){
 //实例化一个jquery的CLASS
 new oop().init();
 });
 </script>

二、建一个oop.js

function oop(){
  //定义变量
  var aaa = this;
  //初始化
  this.init = function(){
    aaa.addnotice();
    aaa.unchange();
    return aaa;
  }
  //添加function
  this.addnotice = function(){
    $("input[type='text']").each(function(){
      $(this)
      .focus(function(){
        if($(this).val() == $(this).attr('notice')){
          $(this).val("");
        }
      })
      .blur(function(){
        if($(this).val() == $(this).attr('notice') || $.trim($(this).val()) == ""){
          $(this).val($(this).attr('notice'));
        }
      });
    });
  }
  //添加function
  this.cleannotice = function(){
    $("input[type='text']").each(function(){
      if($(this).val() == $(this).attr('notice')){
        $(this).val("");
      }
    });
  }
  //添加function
  this.unchange = function(){
    $(".select").bind('change',function(){
      if($(this).val() == '0'){
        alert('noselect');
      }else{
        alert($(this).val());
      }
    });
  }
}

感兴趣的自己测试一下吧

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
jquery.validate使用详解
Jun 02 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
jquery日历插件datepicker用法分析
Jan 22 #Javascript
js简单设置与使用cookie的方法
Jan 22 #Javascript
prototype框架中美元符号$用法分析
Jan 22 #Javascript
详解javascript传统方法实现异步校验
Jan 22 #Javascript
jquery.validate提示错误信息位置方法
Jan 22 #Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 #Javascript
jQuery简单获取键盘事件的方法
Jan 22 #Javascript
You might like
如何获得PHP相关资料
2006/10/09 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
Python使用Pygame绘制时钟
2020/11/29 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
自我鉴定四大框架
2014/01/17 职场文书
小学毕业感言150字
2014/02/05 职场文书
中学生运动会入场词
2014/02/12 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
电子商务专业自荐信
2014/06/02 职场文书
奥林匹克的口号
2014/06/13 职场文书
授权委托书怎么写
2014/09/25 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
运动会宣传语
2015/07/13 职场文书
《西门豹》教学反思
2016/02/23 职场文书
小学语文教学反思范文
2016/03/03 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python