<<
>>

jquery oop class 类的使用

张映 发表于 2010-05-18

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

标签：, ,

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

一，oop.html

查看复制打印?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html dir="ltr" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" lang="utf-8"><head>  
  3.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4.  <title>ooptest</title>  
  5.  <script type="text/javascript" src="reg_files/jquerymin.js"></script>  
  6.  <script type="text/javascript" src="oop.js"></script>  
  7.   
  8.  </head>  
  9.  <body>  
  10.  <br><br>  
  11.  <center>  
  12.  访问<a href="http://blog.51yip.com">海底苍鹰博客</a>  
  13.  </center>  
  14.  <br><br>  
  15.  <div>  
  16.  名字： <input name="Name" id="Name"  type="text" value="请输入中文名字" notice="请输入中文名字" >  
  17.  </div>  
  18.  <div></div>      
  19.   
  20.  区域选择：  <select name="RegionId" id="RegionId" >  
  21.  <option value="0" selected="selected">行政区选择</option>  
  22.  <option value="12">浦东新区</option>  
  23.  <option value="42">松江区</option>  
  24.  <option value="41">金山区</option>  
  25.  <option value="40">崇明区</option>  
  26.  <option value="39">青浦区</option>  
  27.  <option value="37">静安区</option>  
  28.  <option value="36">徐汇区</option>  
  29.  <option value="35">长宁区</option>  
  30.  <option value="34">虹口区</option>  
  31.  <option value="33">闸北区</option>  
  32.  <option value="32">宝山区</option>  
  33.  <option value="31">嘉定区</option>  
  34.  <option value="30">闵行区</option>  
  35.  <option value="29">普陀区</option>  
  36.  <option value="28">卢湾区</option>  
  37.  <option value="27">黄浦区</option>  
  38.  <option value="26">杨浦区</option>  
  39.  <option value="43">奉贤区</option>  
  40.  </select>  
  41.  </body>  
  42.  <html>  
  43.  <script type="text/javascript">  
  44.  $(document).ready(function(){  
  45.  //实例化一个jquery的CLASS  
  46.  new oop().init();  
  47.  });  
  48.  </script>  

二，建一个oop.js

查看复制打印?
  1. function oop(){  
  2.   
  3.    //定义变量  
  4.   
  5.    var aaa = this;  
  6.   
  7.    //初始化  
  8.   
  9.    this.init = function(){  
  10.   
  11.        aaa.addnotice();  
  12.   
  13.        aaa.unchange();  
  14.   
  15.        return aaa;  
  16.   
  17.    }  
  18.   
  19.    //添加function  
  20.   
  21.    this.addnotice = function(){  
  22.   
  23.        $("input[type='text']").each(function(){  
  24.   
  25.             $(this)  
  26.   
  27.             .focus(function(){  
  28.   
  29.                 if($(this).val() == $(this).attr('notice')){  
  30.   
  31.                     $(this).val("");  
  32.   
  33.                 }  
  34.   
  35.             })  
  36.   
  37.             .blur(function(){  
  38.   
  39.                 if($(this).val() == $(this).attr('notice') || $.trim($(this).val()) == ""){  
  40.   
  41.                     $(this).val($(this).attr('notice'));  
  42.   
  43.                 }  
  44.   
  45.             });  
  46.   
  47.        });  
  48.   
  49.    }  
  50.   
  51.    //添加function  
  52.   
  53.    this.cleannotice = function(){  
  54.   
  55.        $("input[type='text']").each(function(){  
  56.   
  57.             if($(this).val() == $(this).attr('notice')){  
  58.   
  59.                 $(this).val("");  
  60.   
  61.             }  
  62.   
  63.        });  
  64.   
  65.    }  
  66.   
  67.    //添加function  
  68.   
  69.    this.unchange = function(){  
  70.   
  71.        $(".select").bind('change',function(){  
  72.   
  73.             if($(this).val() == '0'){  
  74.   
  75.                 alert('noselect');  
  76.   
  77.             }else{  
  78.   
  79.                 alert($(this).val());  
  80.   
  81.             }  
  82.   
  83.        });  
  84.   
  85.    }  
  86.   
  87. }  

自己测试一下吧



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/787.html
<<
>>

相关文章