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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
PHPMailer 中文使用说明小结
2010/01/22 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
jQuery 操作XML入门
2008/12/25 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
python获取代码运行时间的实例代码
2018/06/11 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
仓库管理专业个人的自我评价
2013/12/30 职场文书
会计电算化专业求职信
2014/06/10 职场文书
课外活动总结
2015/02/04 职场文书
大学军训口号大全
2015/12/24 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
SpringBoot集成Redis的思路详解
2021/10/16 Redis
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis