JQuery OOP 及 OOP思想的简易理解
在项目维护的时候，看到通篇的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思想的简易理解的更多相关文章
- struts2.1笔记01：MVC框架思想浅层理解
1. Struts 1是全世界第一个发布的MVC框架: 它由Craig McClanahan在2001年发布,该框架一经推出,就得到了世界上Java Web开发者的拥护,经过长达6年时间的锤炼,S ...
- jQuery用面向对象的思想来编写验证表单的插件
本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...
- Sql Jions 的简易理解
Sql Jions 的简易理解 Select * from TableA A left jion TableB B on A.key = B.key Select * from TableA ...
- 转：怎样理解OOP？OOP又是什么？
本文转载至:https://blog.csdn.net/q34323201/article/details/80198271. OOP面向对象编程.OOP思想中很重要的有五点,类,对象,还有面向对象的 ...
- 面向对象（OOP）--OOP基础与this指向详解
前 言 学过程序语言的都知道,我们的程序语言进化是从“面向机器”.到“面向过程”.再到“面向对象”一步步的发展而来.类似于汇编语言这样的面向机器的语言,随着时代的发展已经逐 ...
- JQuery（三）-- AJAX的深入理解以及JQuery的使用
HTTP HTTP http: 超文本传输协议.特点: 简单.快速.灵活.无状态.无连接 URL: 统一资源定位符. 组成:协议名://主机IP:端口号/项目资源地址?传递参数的键值对#锚点 ①ip ...
- CPU保护模式DPL、CPL简易理解
现代INTEL CPU都有保护模式,实模式这两种CPU运行模式.当CPU加电,CPU初始化时就运行在是模式下,然后现代操作系统会从实模式跳转到保护模式! 为什么需要保护模式? 在最开始编程的汇编时代, ...
- 2017.12.25 Java中面向对象思想的深刻理解
今日内容介绍 1.面向对象思想 2.类与对象的关系 3.局部变量和成员变量的关系 4.封装思想 5.private,this关键字 6.随机点名器 01面向对象和面向过程的思想 * A: 面向过程与面 ...
- jQuery关于隐式迭代的个人理解~
1.JQuery对象" 如: $('div').text("div展示的信息") 可以看成"是一个包含一个dom数组 和 包含所有Jquery方法的容器 2.每 ...
随机推荐
- Android 网格视图GridView的使用
网格视图GridView的排列方式与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要按矩阵格式进行显示时,就可以使用GridView控件来实现. 本文将以一个具体的实例来说明如何使用GridV ...
- Adobe Flash Builder 4.7 新功能详解
Adobe Flash Builder 4.7 Beta终于公开测试了.虽然版本号只增加了.1,增强的新功能可是一点也不含糊.我们一起来看看到底有什么新功能吧! 在我看来,最大的改变是终于提供64 ...
- TypeScript教程1
Boolean类型aser:和as3一样 var isDone: boolean = false; 复制代码 Number类型aser:as3经常用int和uint,以后只用number就可以啦 va ...
- java_db2错误码对应值
DB2-SQLSTATE消息 2012-08-27 10:35:27| 分类: db2|举报|字号 订阅 本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子 ...
- js与android webview交互
0x01 js调用java代码 android webview中支持通过添加js接口 webview.addJavascriptInterface(new JsInteration(), " ...
- HDU 4256 The Famous Clock
The Famous Clock Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- 【原创】python中文编码问题深入分析（二）：print打印中文异常及显示乱码问题分析与解决
在学习python以及在使用python进行项目开发的过程中,经常会使用print语句打印一些调试信息,这些调试信息中往往会包含中文,如果你使用python版本是python2.7,或许你也会遇到和我 ...
- 好用的JS压缩工具—JSCompress
好用的JS压缩工具-JSCompress http://www.jscompress.cn/ 1.容量体积小 2.可视化.自动化 3.独立性
- 基于微博数据用 Python 打造一颗“心”
一年一度的虐狗节刚过去不久,朋友圈各种晒,晒自拍,晒娃,晒美食,秀恩爱的.程序员在晒什么,程序员在加班.但是礼物还是少不了的,送什么好?作为程序员,我准备了一份特别的礼物,用以往发的微博数据打造一颗“ ...
- 如何实现php字符串翻转?
字符串:$str = "abcdefg"; // 方法一(直接使用php自带函数strrev($str)) print_r(strrev($str)); // 使用for循环方式, ...