<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>StripingTable</title>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<!--灝唈Query寮曠敤榪涙潵-->
<script type="text/javascript">
$(document).ready(function(){ //榪欎釜灝辨槸浼犺鐨剅eady
$(".stripe tr").mouseover(function(){
//濡傛灉榧犳爣縐誨埌class涓簊tripe鐨勮〃鏍肩殑tr涓婃椂錛屾墽琛屽嚱鏁?/span>
$(this).addClass("over");}).mouseout(function(){
//緇欒繖琛屾坊鍔燾lass鍊間負over錛屽茍涓斿綋榧犳爣涓鍑鴻琛屾椂鎵ц鍑芥暟
$(this).removeClass("over");}) //縐婚櫎璇ヨ鐨刢lass
});
</script>
<style type="text/css">
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.over td {
background:#bcd4ec; /*榪欎釜灝嗘槸榧犳爣楂樹寒琛岀殑鑳屾櫙鑹?/span>*/
}
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!--鐢╟lass="stripe"鏉ユ爣璇嗛渶瑕佷嬌鐢ㄨ鏁堟灉鐨勮〃鏍?/span>-->
<thead>
<tr>
<th>濮撳悕</th>
<th>騫撮緞</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>閭撳浗姊?/span></td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>閭撳浗姊?/span></td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>閭撳浗姊?/span></td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>閭撳浗姊?/span></td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>閭撳浗姊?/span></td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>閭撳浗姊?/span></td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
榪欓噷鏈変竴涓猨Query鐨勬妧宸т笉寰椾笉鎻愪竴涓嬶細jQuery鐨勯摼寮忔搷浣滐紝浠涔堟槸閾懼紡鎿嶄綔鍛紵 鎴戜滑鏉ョ湅鐪嬶紝鏈潵搴旇鍐欐垚榪欐牱瀛愮殑
$(this).addClass("over");})
$(".stripe tr").mouseout(function(){
$(this).removeClass("over"); })
浣嗘槸鎴戜滑鍐欐垚浜嗭細
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
]]>
濡傛灉浣犺繖鏍鋒兂錛?#8220;瀛╁瓙錛屾垜闇瑕佸彟澶栦竴涓猨avascript搴擄紝灝卞ソ姣旀垜I need another hole in my head”閭ｄ箞鍔犲叆榪欎釜淇變箰閮ㄥ惂銆傝繖姝ｆ槸鎴戠涓嬈￠亣鍒扮殑鏃跺欐墍鎯崇殑銆?
鎴戝凡緇忕敤榪囦簡Moo.fx, Scriptaculous, TW-SACK, 鍜?Prototype. 鎴戞浘鍙備笌浜哛ICO, Yahoo YUI鍜屽叾浠栦竴浜涘簱鐨勫紑鍙戙?
娌℃湁浜哖HPjavascript鍜屾垜涓鐐逛篃涓嶄翰榪戜簡銆備絾鏄垜榪樻槸灝藉叏鍔涗繚鎸佸ご鑴戞竻閱掞紝騫跺敖閲忎繚鎸佺敤AJAX鍘繪濊冦?
鎵浠ュ綋鎴戦亣鍒癹Query鐨勬椂鍊欐垜鎯?“榪橀渶瑕佸彟澶栦竴涓猨avascript搴撳悧?涓嶄簡,璋㈣阿…”
window.onload()鏄紶緇焜avascript閲屼竴涓兘鍚冭嫤鑰愬姵鐨勫浼欍傚畠闀夸箙浠ユ潵涓鐩磋紼嬪簭鍛樹滑浣滀負灝藉揩瑙ｅ喅瀹㈡埛绔〉闈㈣澆鍏ラ棶棰樼殑鎹峰緞銆?
浣嗘湁鏃跺欑瓑寰呴〉闈㈣澆鍏ヨ繕鏄笉澶熷揩銆?
鍙湁灝戞暟澶у瀷鐨勫浘鐗囨枃浠朵細琚揩閫熺殑杞藉叆錛岃屽ぇ閮ㄥ垎澶у瀷鐨勫浘鐗囨枃浠朵細浣縲indow.onload()杞藉叆鐨勫緢鎱€傛墍浠ュ綋鎴戜負鏈榪戠殑緗戠粶钀ラ攢鍒涘緩涓涓獁eb搴旂敤紼嬪簭鐨勬椂鍊欐垜涓嶅緱甯屾湜鏇村揩涓鐐廣傛湁涓浜涘洿緇晈indow.onload()鐨勬柊鐮旂┒(姣斿brother cake)鐨勪唬鐮佹槸涓縐嶅揩閫熺殑鏂瑰紡銆傚鏋滀綘闇瑕侊紝鍙互璇曡瘯銆?
浣嗘槸濡傛灉浣犺鍋氫竴浜汥OM(鏂囨。瀵硅薄妯″瀷)javascript鐨勭紪紼嬶紝閭ｄ箞浣犱負浠涔堜笉璇曡瘯jQuery錛屽畠灝卞儚浣犺嚜宸變翰鑷埗浣滀竴涓泲緋曪紝騫跺搧灝濆畠銆傦紙鍙屽叧Brother Cake錛屼繌鐨瘽錛夈?
jQuery鏈変竴涓敤鏉ヤ綔涓篋OM蹇熻澆鍏avascript鐨勫緱蹇冨簲鎵嬬殑灝忓嚱鏁幫紝閭ｅ氨鏄痳eady… 浠栧湪欏甸潰鍔犺澆瀹屾垚涔嬪悗鎵ц銆?
$(document).ready(function(){
// Your code here
});浣犲彲浠ョ敤浠栨潵杞藉叆浠諱綍浣犳兂瑕佽澆鍏ョ殑javascript錛屽茍涓嶄竴瀹氳淇濈暀jQuery鐨勭紪鐮侀鏍箋傝jQuery鍚屾椂鍘繪墽琛屽涓嚱鏁頒篃鏄彲浠ョ殑銆?
浣犱互鍓嶅彲鑳借榪囩被浼間簬init()涔嬬被鐨勫嚱鏁幫紝浣犱細鍙戠幇jQuery浼氬揩寰堝銆?
鍦ㄤ互鍚庣殑鏁欑▼閲屾垜浠細涓閬嶅張涓閬嶇殑鐢ㄥ埌榪欎釜鍑芥暟銆?
OK浣犵幇鍦ㄥ彲浠ュ皾璇曚竴涓嬩唬鐮?/p>
$(document).ready(function(){alert("Congratluations!");});杞嚜Jquery涓枃紺懼尯
]]>