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代码
Jan 12 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
javascript继承机制实例详解
Nov 20 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
Vue组件间数据传递的方式(3种)
Jul 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
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
JavaScript全局函数使用简单说明
2011/03/11 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
进修护士自我鉴定
2013/10/14 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
银行员工职业规划范文
2014/01/21 职场文书
探亲邀请信范文
2014/01/30 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android