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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
javascript中函数的写法实例代码详解
Oct 28 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/04 冲泡冲煮
一些使用频率比较高的php函数
2008/10/03 PHP
php print EOF实现方法
2009/05/21 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Django的分页器实例(paginator)
2017/12/01 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python and or用法详解
2019/06/26 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python list多级排序知识点总结
2019/10/23 Python
Python新手学习raise用法
2020/06/03 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
Java的基础面试题附答案
2016/01/10 面试题
厉行勤俭节约倡议书
2014/05/16 职场文书
小学生常见病防治方案
2014/06/06 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
家长给老师的感谢信
2015/01/20 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
使用Django框架创建项目
2022/06/10 Python