用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