<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--什麼是選取器?
jQuery選取器繼承了CSS與Path語言的部分文法,允許通過標籤名、屬性名稱或內容對DOM元素進行快速、準確的選擇,而不必擔心瀏覽器的相容性,通過jQuery選取器對頁面元素的精準定位,才能完成元素性和行為的處理。
選取器的優勢?
與傳統的JavaScript擷取頁面元素和便攜食物相比,jQuery選取器具有明顯的優勢,具體表現在一下兩個方面:
*代碼更簡單
*完善的檢測機制
-->
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
#tbStu{width:260px;border:solid 1px #666;background-color:#eee}
#tbStu tr{line-height:23px;}
#tbStu tr th{background-color:#ccc;color:#fff}
#tbStu .trOdd{background-color:#fff}
</style>
<!-- 使用javaScript實現隔行變色-->
<!--
<script type="text/javascript">
window.onload = function () {
var oTb = document.getElementById("tbStu");
for (var i = 0; i < oTb.rows.length - 1; i++) {
if (i % 2) {
oTb.rows[i].className = "trOdd";
}
}
}
</script>
-->
<!-- 使用jQuery選取器實現隔行變色-->
<script type="text/javascript">
$(function () {
$('#tbStu tr:nth-child(even)').addClass('trOdd');
})
</script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tbody>
<tr><th>學號</th><th>姓名</th><th>性別</th><th>總分</th></tr>
<tr><td>001</td><td>張三</td><td>男</td><td>100</td></tr>
<tr><td>002</td><td>李四</td><td>女</td><td>100</td></tr>
<tr><td>003</td><td>王五</td><td>男</td><td>100</td></tr>
<tr><td>004</td><td>趙六</td><td>女</td><td>100</td></tr>
<tr><td>005</td><td>周七</td><td>男</td><td>100</td></tr>
<tr><td>006</td><td>王八</td><td>女</td><td>100</td></tr>
</tbody>
</table>
</body>
</html>