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 相关文章推荐
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
解决vue 退出动画无效的问题
Aug 09 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
Yii2如何批量添加数据
2016/05/17 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
vue组件学习教程
2017/09/09 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
python操作日期和时间的方法
2014/03/11 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
商务日语专业自荐信
2014/04/17 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL