在项目维护的时候，看到通篇的function实际上是非常费（痛）劲（苦），个人对于前端也不是特别熟悉，就想着JQuery能否也建立OOP的写法？
目的便于日后代码维护管理，就算不为了自己，日后交接后也能让另一个攻城狮，一目了然的定位错误。
一、oop.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html dir="ltr" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" lang="utf-8"><head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>ooptest</title> 6 <script type="text/javascript" src="jquery.min.js"></script> 7 <script type="text/javascript" src="oop.js"></script> 8 </head> 9 <body> 10 <br><br> 11 <center> 12 访问<a href="http://www.jb51.net">脚本之家</a> 13 </center> 14 <br><br> 15 <div> 16 名字： <input name="Name" id="Name" type="text" value="请输入中文名字" notice="请输入中文名字" > 17 </div> 18 <div></div> 19 区域选择： <select name="RegionId" id="RegionId" > 20 <option value="0" selected="selected">行政区选择</option> 21 <option value="12">浦东新区</option> 22 <option value="42">松江区</option> 23 <option value="41">金山区</option> 24 <option value="40">崇明区</option> 25 <option value="39">青浦区</option> 26 <option value="37">静安区</option> 27 <option value="36">徐汇区</option> 28 <option value="35">长宁区</option> 29 <option value="34">虹口区</option> 30 <option value="33">闸北区</option> 31 <option value="32">宝山区</option> 32 <option value="31">嘉定区</option> 33 <option value="30">闵行区</option> 34 <option value="29">普陀区</option> 35 <option value="28">卢湾区</option> 36 <option value="27">黄浦区</option> 37 <option value="26">杨浦区</option> 38 <option value="43">奉贤区</option> 39 </select> 40 </body> 41 <html> 42 <script type="text/javascript"> 43 $(document).ready(function(){ 44 //实例化一个jquery的CLASS 45 new oop().init(); 46 }); 47 </script>
二、建一个oop.js
1 function oop(){ 2 //定义变量 3 var aaa = this; 4 //初始化 5 this.init = function(){ 6 aaa.addnotice(); 7 aaa.unchange(); 8 return aaa; 9 } 10 //添加function 11 this.addnotice = function(){ 12 $("input[type='text']").each(function(){ 13 $(this) 14 .focus(function(){ 15 if($(this).val() == $(this).attr('notice')){ 16 $(this).val(""); 17 } 18 }) 19 .blur(function(){ 20 if($(this).val() == $(this).attr('notice') || $.trim($(this).val()) == ""){ 21 $(this).val($(this).attr('notice')); 22 } 23 }); 24 }); 25 } 26 //添加function 27 this.cleannotice = function(){ 28 $("input[type='text']").each(function(){ 29 if($(this).val() == $(this).attr('notice')){ 30 $(this).val(""); 31 } 32 }); 33 } 34 //添加function 35 this.unchange = function(){ 36 $(".select").bind('change',function(){ 37 if($(this).val() == '0'){ 38 alert('noselect'); 39 }else{ 40 alert($(this).val()); 41 } 42 }); 43 } 44 }
以上代码内容转自 http://www.jb51.net/article/78487.htm
补充内容，以下属于个人经验理解，针对尚不熟悉OOP思想的同学食用
1 <?php 2 /** 3 * 歌手类 4 */ 5 Class singer(){ 6 //唱歌 7 function sing(){ 8 echo "唱歌"; 9 } 10 //跳舞 11 function dance(){ 12 echo "跳舞"; 13 } 14 }
Class是类，他是一个抽象概念，（记住一句俗语:物以'类'聚）
换成我们的话意思是：蓝图、原则、原型；
举例：
歌手，他是一个类;
世界上有无数无数的歌手，但是各有不同;(不同的歌手，各自的属性数值不一，所以造就出不一样的歌手)
但他们都有共同的职能（这就是function），例如：唱歌、跳舞等...
假设，需要造一名歌手 你要完成他就要实例化，new singer()，这个叫实例化，一名歌手就出来了
往里面赋值实现方法等等等的操作步骤之后，就使得这名歌手成为了真正的有名有姓能唱擅舞的歌手。
当然，因为这个类叫歌手，那我需要实例化一个汽车呢？这样就完全分离了
页面里面就不用实例化歌手类，而是实例化汽车类，new car().name('BMW')；也就是这样了。
以上是最最简单的理解。
转载请注明
作者:xxxholicl