过滤选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>（过滤选择器）</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("tr:lt(4)").css("background-color", "lightpink");
$("tr:eq(0)").css("background-color", "lightblue");
// $("tr:lt(4)").css("background-color", "lightblue");
// $("tr:not(tr:eq(0))").css("background-color", "lightpink");
$("tr:gt(4)").css("background-color", "lightgreen");
// $("tr:eq(0)").css("background-color", "yellow");
// $("tr>td:odd").css("color", "blue").css("font-weight", "bold");
$(":header").css("background-color", "green").css("color", "white");
$("div").css("display", "none");
});
function fn(index) {
$("input[type='button']").css("background-color", "lightgray").css("color", "black");
$(":focus").css("background-color", "black").css("color", "white");
// $("div").css("display", "none");
// $("div:hidden:eq(" + (index - 1) + ")").css("display", "block");
$("div").hide(); //隐藏元素(jQuery的API方法)
$("div:hidden:eq(" + (index - 1) + ")").show(); //显示元素(jQuery的API方法)
//原生JS实现同样功能
// var allDiv = document.getElementsByTagName("div");
// for(var i = 0; i < allDiv.length; i++) {
// allDiv[i].style.display = "none";
// }
// allDiv[index - 1].style.display = "block";
}
</script>
</head>
<body>
<h1>标题一号字体</h1>
<h2>标题二号字体</h2>
<h3>标题三号字体</h3>
<h4>标题四号字体</h4>
<h5>标题五号字体</h5>
<h6>标题六号字体</h6>
<table border="1">
<tr>
<th> </th>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<th>一节</th>
<td>Java</td>
<td>HTML</td>
<td>Java</td>
<td>HTML</td>
<td>Java</td>
</tr>
<tr>
<th>二节</th>
<td>Java</td>
<td>HTML</td>
<td>Java</td>
<td>HTML</td>
<td>Java</td>
</tr>
<tr>
<th>三节</th>
<td>Java</td>
<td>HTML</td>
<td>Java</td>
<td>HTML</td>
<td>Java</td>
</tr>
<tr>
<th>午休</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>四节</th>
<td>HTML</td>
<td>Java</td>
<td>HTML</td>
<td>Java</td>
<td>MySQL</td>
</tr>
<tr>
<th>五节</th>
<td>HTML</td>
<td>Java</td>
<td>HTML</td>
<td>Java</td>
<td>MySQL</td>
</tr>
<tr>
<th>六节</th>
<td>HTML</td>
<td>Java</td>
<td>HTML</td>
<td>Java</td>
<td>MySQL</td>
</tr>
</table>
<input type="button" value="测试" onclick="fn(1);" />
<input type="button" value="测试" onclick="fn(2);" />
<input type="button" value="测试" onclick="fn(3);" />
<input type="button" value="测试" onclick="fn(4);" />
<input type="button" value="测试" onclick="fn(5);" />
<div>
内容一
</div>
<div>
内容二
</div>
<div>
内容三
</div>
<div>
内容四
</div>
<div>
内容五
</div>
</body>
</html>
