<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery操作练习-隔行变色</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){//页面加载完成以后
//1. 点击所有的 p 节点, 能够弹出其对应的文本内容
$("p").click(function(){
//弹出被点击p标签的文本信息
alert("^^" + $(this).text() + "^^");
});
//2. 点击按钮使第一个 table 隔行变色
$("button:eq(1)").click(function () {
//第一个table中的tr下标是0，2，4...
$("table:eq(0) tr:even").css("background", "yellow");
});
//3. 点击按钮使第二个 table 隔行变色
$("button:last").click(function () {
//第一个table中的tr下标是1，3，5...
$("table:last tr:odd").css("background","red")
});
//3. 点击 button, 弹出 checkbox 被选中的个数
$(":button:first").click(function(){
alert("选中个数是：" + $(":checkbox:checked").length);
});
});
</script>
</head>
<body>
<p>我是中国人</p>
<p>我爱我的祖国</p>
<p>祝福祖国繁荣富强</p>
<table>
<tr>
<td>第一行第一列</td><td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td><td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td><td>第三行第二列</td>
</tr>
<tr>
<td>第四行第一列</td><td>第四行第二列</td>
</tr>
<tr>
<td>第五行第一列</td><td>第五行第二列</td>
</tr>
<tr>
<td>第六行第一列</td><td>第六行第二列</td>
</tr>
</table>
<br/>
<br/>
<br/>
<table>
<tr>
<td>第一行第一列</td><td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td><td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td><td>第三行第二列</td>
</tr>
<tr>
<td>第四行第一列</td><td>第四行第二列</td>
</tr>
<tr>
<td>第五行第一列</td><td>第五行第二列</td>
</tr>
<tr>
<td>第六行第一列</td><td>第六行第二列</td>
</tr>
</table>
<input type="checkbox" name="test" />java
<input type="checkbox" name="test" />CSS
<input type="checkbox" name="test" />HTML<br/>
<input type="checkbox" name="test" />JS
<input type="checkbox" name="test" />mySql
<input type="checkbox" name="test" />JDBC<br/>
<button>您选中的个数</button><br/>
<button>第一个表格隔行变色</button><br/>
<button>第二个表格隔行变色</button><br/>
</body>
</html>
