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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
js函数调用的方式
May 06 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 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将部分内容用星号替换
2020/04/21 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python  连接字符串(join %)
2008/09/06 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
python 异常处理总结
2016/10/18 Python
Unicode和Python的中文处理
2017/03/19 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
法学毕业生自荐信
2013/11/13 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
什么是就业协议书
2014/04/17 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
2016年国培研修日志
2015/11/13 职场文书
学校运动会开幕词
2016/03/03 职场文书
Python if else条件语句形式详解
2022/03/24 Python