在项目维护的时候，看到通篇的function实际上是非常费（痛）劲（苦），个人对于前端也不是特别熟悉，就想着JQuery能否也建立OOP的写法？

目的便于日后代码维护管理，就算不为了自己，日后交接后也能让另一个攻城狮，一目了然的定位错误。

一、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());

       }

     });

   }

 }

以上代码内容转自 http://www.jb51.net/article/78487.htm

补充内容，以下属于个人经验理解，针对尚不熟悉OOP思想的同学食用

 <?php

 /**

  * 歌手类

  */

 Class singer(){

    //唱歌

    function sing(){

         echo "唱歌";

     }

     //跳舞

     function dance(){

         echo "跳舞";

     }

 }

Class是类，他是一个抽象概念，（记住一句俗语:物以'类'聚）

换成我们的话意思是：蓝图、原则、原型；

举例：

　　歌手，他是一个类;

　　世界上有无数无数的歌手，但是各有不同;(不同的歌手，各自的属性数值不一，所以造就出不一样的歌手)

　　但他们都有共同的职能（这就是function），例如：唱歌、跳舞等...

　假设，需要造一名歌手 你要完成他就要实例化，new singer()，这个叫实例化，一名歌手就出来了

　往里面赋值实现方法等等等的操作步骤之后，就使得这名歌手成为了真正的有名有姓能唱擅舞的歌手。

　当然，因为这个类叫歌手，那我需要实例化一个汽车呢？这样就完全分离了

页面里面就不用实例化歌手类，而是实例化汽车类，new car().name('BMW')；也就是这样了。

　以上是最最简单的理解。

转载请注明
作者:xxxholicl

JQuery OOP 及 OOP思想的简易理解的更多相关文章

  1. struts2.1笔记01：MVC框架思想浅层理解

      1. Struts 1是全世界第一个发布的MVC框架: 它由Craig McClanahan在2001年发布,该框架一经推出,就得到了世界上Java Web开发者的拥护,经过长达6年时间的锤炼,S ...

  2. jQuery用面向对象的思想来编写验证表单的插件

    本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...

  3. Sql Jions 的简易理解

    Sql Jions 的简易理解 Select  * from TableA A  left jion TableB  B on  A.key = B.key Select  * from TableA ...

  4. 转：怎样理解OOP？OOP又是什么？

    本文转载至:https://blog.csdn.net/q34323201/article/details/80198271. OOP面向对象编程.OOP思想中很重要的有五点,类,对象,还有面向对象的 ...

  5. 面向对象（OOP）--OOP基础与this指向详解

      前  言            学过程序语言的都知道,我们的程序语言进化是从“面向机器”.到“面向过程”.再到“面向对象”一步步的发展而来.类似于汇编语言这样的面向机器的语言,随着时代的发展已经逐 ...

  6. JQuery（三）-- AJAX的深入理解以及JQuery的使用

    HTTP HTTP http: 超文本传输协议.特点:  简单.快速.灵活.无状态.无连接 URL: 统一资源定位符. 组成:协议名://主机IP:端口号/项目资源地址?传递参数的键值对#锚点 ①ip ...

  7. CPU保护模式DPL、CPL简易理解

    现代INTEL CPU都有保护模式,实模式这两种CPU运行模式.当CPU加电,CPU初始化时就运行在是模式下,然后现代操作系统会从实模式跳转到保护模式! 为什么需要保护模式? 在最开始编程的汇编时代, ...

  8. 2017.12.25 Java中面向对象思想的深刻理解

    今日内容介绍 1.面向对象思想 2.类与对象的关系 3.局部变量和成员变量的关系 4.封装思想 5.private,this关键字 6.随机点名器 01面向对象和面向过程的思想 * A: 面向过程与面 ...

  9. jQuery关于隐式迭代的个人理解~

    1.JQuery对象" 如: $('div').text("div展示的信息") 可以看成"是一个包含一个dom数组 和 包含所有Jquery方法的容器 2.每 ...

随机推荐

  1. request.setAttribute和request.getAttribute还有session.setAttribute和session.getAttribute还有request.getParameter和request.getAttribute区别和联系

    1.session.setAttribute()和session.getAttribute()配对使用,作用域是整个会话期间,在所有的页面都使用这些数据的时候使用. 2.request.setAttr ...

  2. HDU5874

    Friends and Enemies Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...

  3. LoadRunner 调用Dll完成加密解密

    LoadRunner里的函数比较少,没有MD5.Base64加密. 我们可以通过在C++里把一些加解密写成函数,供LR调用. DLL函数编写 C++里新建工程Class Library(此处是用VS2 ...

  4. OVS vxlan 底层结构分析 - 每天5分钟玩转 OpenStack（148）

    上一节创建了 vxlan100_net 并部署 instance,今天我们来分析底层网络结构. 控制节点 执行 ovs-vsctl show: br-int br-int 连接了如下 port: ta ...

  5. [UWP]依赖属性2：使用依赖属性

    5. 完整的自定义依赖属性 5.1 定义 /// <summary> /// 标识 Title 依赖属性. /// </summary> public static reado ...

  6. javascript this的一些误解

    太拘泥于"this"的字面意思就会产生一些误解.有两种常见的对于this 的解释,但是它们都是错误的. 1.指向自身 人们很容易把this 理解成指向函数自身,这个推断从英语的语法 ...

  7. java byte【】数组与文件读写

    此文全文参考http://blog.csdn.net/sniffer_wang/article/details/7455701,自己加以改进应用,谢了 import java.io.ByteArray ...

  8. vm虚拟机Kali2.0实现与物理机之间的文件拖动共享

    MarkdownPad Document html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,ab ...

  9. 配置IIS Express以便通过IP地址访问调试的网站

    问题背景 最近使用C#编写了一个WebService,希望通过Java进行调用.使用Visual Studio 2013调试WebService时,可以在浏览器中通过localhost地址访问WSDL ...

  10. MySql Sql 优化技巧分享

    有天发现一个带inner join的sql 执行速度虽然不是很慢(0.1-0.2),但是没有达到理想速度.两个表关联,且关联的字段都是主键,查询的字段是唯一索引. sql如下: SELECT p_it ...