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.每 ...
随机推荐
- Java学习之旅基础知识篇：数组及引用类型内存分配
在上一篇中,我们已经了解了数组,它是一种引用类型,本篇将详细介绍数组的内存分配等知识点.数组用来存储同一种数据类型的数据,一旦初始化完成,即所占的空间就已固定下来,即使某个元素被清空,但其所在空间仍然 ...
- 在Express中安装XTemplate
上一节讲了安装Express,并且生成了一个"microblog"的工程,我们的目标是在工程下安装XTemplate: 1.安装xtpl npm install xtpl xtem ...
- 记一次企业级爬虫系统升级改造（五）：基于JieBaNet+Lucene.Net实现全文搜索
实现效果: 上一篇文章有附全文搜索结果的设计图,下面截一张开发完成上线后的实图: 基本风格是模仿的百度搜索结果,绿色的分页略显小清新. 目前已采集并创建索引的文章约3W多篇,索引文件不算太大,查询速度 ...
- 维护网站时碰到的Office组件导入、导出出现的问题
问题一:检索COM 类工厂中CLSID 为 {00024500-0000-0000-C000-000000000046}的组件时失败,原因是出现以下错误: 80070005 解决方法: 1.运行dco ...
- 【JAVA笔记】JAVA后端实现统一扫码支付：微信篇
最近做完了一个项目,正好没事做,产品经理就给我安排了一个任务. 做一个像收钱吧这样可以统一扫码收钱的功能. 一开始并不知道是怎么实现的,咨询了好几个朋友,才知道大概的业务流程:先是开一个网页用 ...
- ubuntu 16.04 的64位 安装arm-none-linux-gnueabi-gcc的步骤和问题解决
一 首先下载arm-none-linux-gnueabi-gcc交叉编译器,根据不同的需求请在网址: https://launchpad.net/gcc-arm-embedded/+download ...
- [原创.数据可视化系列之十二]使用 nodejs通过async await建立同步数据抓取
做数据分析和可视化工作,最重要的一点就是数据抓取工作,之前使用Java和python都做过简单的数据抓取,感觉用的很不顺手. 后来用nodejs发现非常不错,通过js就可以进行数据抓取工作,类似jqu ...
- 成小胖学习ActiveMQ·基础篇
过了个春节,回到公司的成小胖变成了成大胖.但是你们千万别以为他那个大肚子里面装的都是肥肉,里面的墨水也多了不少嘞,毕竟成小胖利用春节的半个月时间专心学习并研究了 ActiveMQ,嘿嘿……这不,为了检 ...
- 怎么在ubuntu上运行php代码?
1. 首先,你需要安装Apache2. sudo apt-get update sudo apt-get install apache2 当安装完以后,Apache就已经开始运行啦,你可以进行测试,通 ...
- ubuntu的常用命令
1. locate------根据名字找文件,例如: locate php.ini 2.find----------以目录结构的形式搜索文件, 例如:find / -type d -iname jvm ...