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.每 ...
随机推荐
- Servlet中进行context属性的同步
Servlet中进行context属性的同步: 必须所有使用context的servlet都进行synchronized才可以实现同步: servlet: package com.stono.serv ...
- OpenCV教程二 - Mat对象与它各种用法
学习OpenCV大家都会遇到一个对象叫做Mat,此对象非常神奇,支持各种操作.很多初学者因此被搞得头晕脑胀,它各种用法太多太杂,搞得初学者应接不暇,感觉有心无力.无处下手之感.这里我们首先要正本清源, ...
- CodeForces 722B
B. Verse Pattern time limit per test:1 second memory limit per test:256 megabytes input:standard inp ...
- JS与浏览器的几个兼容性问题
第一个:有的浏览器不支持getElementsByClassName(),所以需要写一个function()来得到需要标签的class,然后进行class的增加.删除等操作. 第二个:在需要得到特定标 ...
- 在ubuntu linux 中编写一个自己的python脚本
在ubuntu linux 中编写一个自己的简单的bash脚本. 实现功能:终端中输入简单的命令(以pmpy为例(play music python),为了区别之前说的bash脚本添加了py后缀),来 ...
- Myeclipse插件将wsdl生成java客户端代码
一.建立webservice服务端: 1.新建一个web service project,名称为webservice_server截图如下,点击finish. 2.选择工程,点击右键,选择new-&g ...
- 一个web应用的诞生--数据存储
上一章实现了登录的部分功能,之所以说是部分功能,是因为用户名和密码写成固定值肯定是不可以的,一个整体的功能,至少需要注册,登录,密码修改等,这就需要提供一个把这些值存储到数据库的能力. 当前的主流数据 ...
- Swift2.0 函数学习笔记
最近又有点忙,忙着找工作,忙着适应这个新环境.现在好了,上班两周周了,也适应过来了,又有时间安安静静的就行我们前面的学习了.今天这篇笔记,记录的就是函数的使用.下面这些代码基本上是理清楚了函数的额使用 ...
- 转： 尽己力，无愧于心 FastReport.Net 常用功能总汇
FastReport.Net 常用功能总汇 一.常用控件 文本框:输入文字或表达式 表格:设置表格的行列数,输入数字或表达式 子报表:放置子报表后,系统会自动增加一个页面,你可以在此页面上设计需要 ...
- java 继承的学习（转）
转自:http://www.cnblogs.com/happyframework/p/3332243.html,非常感谢啊 public class test { /** * @param args ...