jquery采用oop模式class类的使用示例
本文实例讲述了jquery采用oop模式class类的使用方法。分享给大家供大家参考，具体如下：
这里用class来管理jquery的各个function，我觉得很方便，并且代码可读性也很强。以前我喜欢建文件写function，再包括文件，到后来找一个function就比较麻烦了。没有用class来管理function方便。费话不多说了。
一、oop.html
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmldir="ltr"xml:lang="zh-CN"xmlns="http://www.w3.org/1999/xhtml"lang="utf-8"><head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>ooptest</title>
<scripttype="text/javascript"src="jquery.min.js"></script>
<scripttype="text/javascript"src="oop.js"></script>
</head>
<body>
<br><br>
<center>
访问<ahref="https://www.nhooo.com">毛票票</a>
</center>
<br><br>
<div>
名字：<inputname="Name"id="Name"type="text"value="请输入中文名字"notice="请输入中文名字">
</div>
<div></div>
区域选择：<selectname="RegionId"id="RegionId">
<optionvalue="0"selected="selected">行政区选择</option>
<optionvalue="12">浦东新区</option>
<optionvalue="42">松江区</option>
<optionvalue="41">金山区</option>
<optionvalue="40">崇明区</option>
<optionvalue="39">青浦区</option>
<optionvalue="37">静安区</option>
<optionvalue="36">徐汇区</option>
<optionvalue="35">长宁区</option>
<optionvalue="34">虹口区</option>
<optionvalue="33">闸北区</option>
<optionvalue="32">宝山区</option>
<optionvalue="31">嘉定区</option>
<optionvalue="30">闵行区</option>
<optionvalue="29">普陀区</option>
<optionvalue="28">卢湾区</option>
<optionvalue="27">黄浦区</option>
<optionvalue="26">杨浦区</option>
<optionvalue="43">奉贤区</option>
</select>
</body>
<html>
<scripttype="text/javascript">
$(document).ready(function(){
//实例化一个jquery的CLASS
newoop().init();
});
</script>
二、建一个oop.js
functionoop(){
//定义变量
varaaa=this;
//初始化
this.init=function(){
aaa.addnotice();
aaa.unchange();
returnaaa;
}
//添加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());
}
});
}
}
感兴趣的自己测试一下吧
希望本文所述对大家jQuery程序设计有所帮助。