jquery采用oop模式class类的使用示例

2024-10-13 21:04:16

本文实例讲述了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="http://www.jb51.net">我们</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程序设计有所帮助。

jquery表单对象属性过滤选择器实例分析

本文实例讲述了jquery表单对象属性过滤选择器用法.分享给大家供大家参考.具体分析如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &
jquery中object对象循环遍历的方法

一个朋友问对象如何转为数组,当我问他为啥要转得时候,他告诉我,数组可以用js循环遍历,而对象则不可以.其实呢,对象同样可以循环遍历的啊.不用转换也可以循环!说明你对js或者jquery的某些操作不是很熟练!在这里我简单介绍一下! 案例我们看如下对象: var data={ 张三:69, 李四:72, 王五:90, 二麻子:88, 前端博客:100, haorooms : 98, 王大壮:99 } 假如上面是后台返回的一个key,一个是value的对象(这种对象相信大家经常遇到吧!),现在要把这
jquery解析json格式数据的方法(对象、字符串)

本文实例讲述了jquery解析json格式数据的方法.分享给大家供大家参考,具体如下: json数据是我们常用的一种小型的数据实时交换的一个东西,他可以利用jquery或js进行解析,下面我来介绍jquery解析json字符串方法. 一.jQuery解析Json数据格式: 使用这种方法,你必须在Ajax请求中设置参数: dataType: "json" 获取通过回调函数返回的数据并解析得到我们想要的值,看源码: jQuery.ajax({ url: full_url, dataType
jquery操作angularjs对象

jquery是一个非常强大的js框架,angularjs是一个非常牛的前端mvc框架.虽然用其中的任何一个框架在项目中够用了,但是有时候这两个框架需要混合着用,虽然不推荐.但有时候混合用时,却非常方便,不要考虑那么多,只要能实现功能,何乐而不为? 最近做的一个产品,前端用angularjs,但表格框架用的却是jquery.datatables.js,当然其中少不了碰到jquery与angularjs交互问题.由于公司保密,我就不用真实项目演示了,写个小demo吧,当然真实的项目要复杂得多. <!
jquery方法+js一般方法+js面向对象方法实现拖拽效果

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
JS/Jquery判断对象为空的方法

发现了一个巧妙的实现: 需要检查一个对象(Object)是否为空,即不包含任何元素.Javascript 中的对象就是一个字典,其中包含了一系列的键值对(Key Value Pair).检查一个对象是否为空,等价于检查对象中有没有键值对.写成代码,形如: if (isEmptyObject(obj)) { // obj is empty } else { // not empty } 至于 isEmptyObject 的实现,jQuery 中有一个很有想法的方式,请看代码: function i
使用jQuery在对象中缓存选择器的简单方法

当使用像jQuery这样的库时,开发者通常会使用选择器来访问和操作DOM中的元素.当一个选择在页面上被反复的访问时,把它缓存起来以获得更好的性能是个不错的想法. 让我们看一个例子, jQuery(document).ready(function() { jQuery('#some-selector').on('hover', function() { jQuery(this).fadeOut('slow').delay(400).fadeIn(); console.log(jQuery(this
jquery采用oop模式class类的使用示例

本文实例讲述了jquery采用oop模式class类的使用方法.分享给大家供大家参考,具体如下: 这里用class来管理jquery的各个function,我觉得很方便,并且代码可读性也很强.以前我喜欢建文件写function,再包括文件,到后来找一个function就比较麻烦了.没有用class来管理function方便.费话不多说了. 一.oop.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo
C++OOP对象和类的详细讲解

目录 C++OOP对象和类 1.预备知识 2.抽象和类 2.1 数据抽象 2.2 类 2.3 接口 3.C++中的类和对象 3.1 C++类的定义 3.2 C++对象的定义 3.3 C++访问数据成员 3.4 C++类成员函数总结 C++OOP对象和类本文将从入门的角度介绍C++OOP中的类和对象,事实上C++的类和对象远远不止本文所介绍的内容. 不过如果你感兴趣,我会把其他的内容逐一通过文章的形式介绍给你. 1.预备知识面向对象编程(OOP)是一种特殊的.设计程序的概念性方法,C++通过
jQuery采用连缀写法实现的折叠菜单效果

本文实例讲述了jQuery采用连缀写法实现的折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款jQuery采用连缀写法实现的折叠菜单效果,作者是位高手啊,自己用jQuery的连缀写法编写的,差不多是手风琴菜单,功能是实现了,不过有点担心效率,作者希望与高人一起交流进步. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-lz-fade-in-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUB
浅谈jquery采用attr修改form表单enctype不起作用的问题

做文件上传,需要将表单元素的enctype设置为'multipart/form-data',用jquery的attr方法在目前较新的主流浏览器上测试均可成功,唯独IE下死活不行.后来查阅ie浏览器6,7,8(9+由于开发机为xp,未进行测试)不支持attr的方式来修改enctype属性,需要通过dom元素的原生方法来设置, 代码如下: $('#form1').get(0).encoding = 'multipart/form-data'; 以上这篇浅谈jquery采用attr修改form表单en
PHP设计模式之委托模式定义与用法简单示例

本文实例讲述了PHP设计模式之委托模式定义与用法.分享给大家供大家参考,具体如下: 委托模式: 通过分配或委托至其他对象,委托设计模式能够去除核心对象中的判决和复杂的功能性. class Bank{ protected $info; /* 设置基本信息 @param string $type 类型.例如"RMB" @param int $money 利率.例如"0.4%" */ public function updateBrankInfo($type,$money
Java之dao模式详解及代码示例

什么是dao模式? DAO(Data Access Object)顾名思义是一个为数据库或其他持久化机制提供了抽象接口的对象,在不暴露底层持久化方案实现细节的前提下提供了各种数据访问操作.在实际的开发中,应该将所有对数据源的访问操作进行抽象化后封装在一个公共API中.用程序设计语言来说,就是建立一个接口,接口中定义了此应用程序中将会用到的所有事务方法.在这个应用程序中,当需要和数据源进行交互的时候则使用这个接口,并且编写一个单独的类来实现这个接口,在逻辑上该类对应一个特定的数据存储.DAO模式实
Java设计模式之访问者模式使用场景及代码示例

Java设计模式访问者模式模式概念访问者模式表示一个作用于某对象结构中的各元素的操作,它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作.访问者模式适用于数据结构相对稳定算法又易变化的系统,若系统数据结构对象易于变化,则不适合使用访问者模式.访问者模式的优点是增加操作很容易,因为增加操作意味着增加新的访问者. Visitor应用场景一定会有的疑问:visitor和iterator的区别: visitor可以访问不同的对象(只需要在Element定义对应的accept),但是Ite
Java使用策略模式解决商场促销商品问题示例

本文实例讲述了Java使用策略模式解决商场促销商品问题.分享给大家供大家参考,具体如下: 一模式定义策略模式:定义一系列的算法,将每一种算法封装起来并可以相互替换使用,策略模式让算法独立于使用它的客户应用而独立变化. 二模式举例 1 模式分析我们借用商场促销商品来说明这一模式. 2 策略模式静态类图 3 代码示例 3.1 创建策略接口一IStrategy package com.demo.strategy; /** * 策略接口 * * @author * */ public inter
java开发的工厂方法模式及抽象工厂验证示例

目录工厂方法模式示例抽象工厂模式验证结论工厂方法模式示例开发一个数据格式转换工具,将不同数据源如:txt.excel等格式文件,转换为XML格式输出,需考虑今后其他格式的文件也需要转换为xml格式的扩展性,利用设计模式的有关知识进行设计. 解决思路,使用工厂方法模式完成该功能的设计,设计类图如下: 代码结构如下: 代码如下: public interface Creator { Convertor getConvertor(); } public class ExcelConverto
Python常用工具类之adbtool示例代码

1.adb常用命令关闭adb服务:adb kill-server 启动adb服务 adb start-server 查询当前运行的所有设备 adb devices 可能在adb中存在多个虚拟设备运行可以指定虚拟设备运行 -s 虚拟设备名称重启设备 adb reboot --指定虚拟设备 adb -s 设备名称 reboot 查看日志 adb logcat 清除日志 adb logcat -c 进入linux shell下 adb shell 其中常用的linux命令 c

jquery采用oop模式class类的使用示例

相关推荐

随机推荐