php微信公眾平臺(tái)開(kāi)發(fā)之微信群發(fā)信息
688
2024-01-26
本文實(shí)例講述了jquery采用oop模式class類(lèi)的使用方法。分享給大家供大家參考，具體如下：
這里用class來(lái)管理jquery的各個(gè)function，我覺(jué)得很方便，并且代碼可讀性也很強(qiáng)。以前我喜歡建文件寫(xiě)function，再包括文件，到后來(lái)找一個(gè)function就比較麻煩了。沒(méi)有用class來(lái)管理function方便。費(fèi)話不多說(shuō)了。
一、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="http://www.gimoo.net/t/1903/jquery.min.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1903/oop.js"></script>
</head>
<body>
<br><br>
<center>
訪問(wèn)<a >綠夏網(wǎng)</a>
</center>
<br><br>
<div>
名字： <input name="Name" id="Name" type="text" value="請(qǐng)輸入中文名字" notice="請(qǐng)輸入中文名字" >
</div>
<div></div>
區(qū)域選擇： <select name="RegionId" id="RegionId" >
<option value="0" selected="selected">行政區(qū)選擇</option>
<option value="12">浦東新區(qū)</option>
<option value="42">松江區(qū)</option>
<option value="41">金山區(qū)</option>
<option value="40">崇明區(qū)</option>
<option value="39">青浦區(qū)</option>
<option value="37">靜安區(qū)</option>
<option value="36">徐匯區(qū)</option>
<option value="35">長(zhǎng)寧區(qū)</option>
<option value="34">虹口區(qū)</option>
<option value="33">閘北區(qū)</option>
<option value="32">寶山區(qū)</option>
<option value="31">嘉定區(qū)</option>
<option value="30">閔行區(qū)</option>
<option value="29">普陀區(qū)</option>
<option value="28">盧灣區(qū)</option>
<option value="27">黃浦區(qū)</option>
<option value="26">楊浦區(qū)</option>
<option value="43">奉賢區(qū)</option>
</select>
</body>
<html>
<script type="text/javascript">
$(document).ready(function(){
//實(shí)例化一個(gè)jquery的CLASS
new oop().init();
});
</script>
二、建一個(gè)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());
}
});
}
}
感興趣的自己測(cè)試一下吧
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
