jquery oop class 类的使用

张映 发表于 2010-05-18

分类目录: nodejs/vue/js/jquery

标签:, ,

用class来,管理jquery的各个function,我觉得很方便,并且代码可读性也很强。以前我喜欢建文件,写function,在包括文件,到后来,找一个function就比较麻烦了。没有用class来管理function方便。费话不多说了。

一,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="reg_files/jquerymin.js"></script>
 <script type="text/javascript" src="oop.js"></script>

 </head>
 <body>
 <br><br>
 <center>
 访问<a href="http://blog.51yip.com">海底苍鹰博客</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://blog.51yip.com/jsjquery/787.html

留下评论

留下评论
  • (必需)
  • (必需) (will not be published)
  • (必需)   9X8=?