<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用jquery实现隔行变色的效果</title>
<style>
.one{
background-color:#0FF;
}
.two{
background-color:#9F0;
}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.7.1.js">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
/* $("tr").mouseover(function(){
$(this).addClass("one");
})
$("tr").mouseout(function(){
//alert($("tr").length);
$(this).removeClass("one");
})
$("tr:even").addClass("two");
*/
// $("tr:even").css("background","#ccc");
// $("tr:odd").css("background","#ccc");
$("#btn0").click(function(){
//设置索引值等于一的tr
$("tr:eq(1)").css("background","#ff3");
});
$("#btn1").click(function(){
//设置索引值等于一的tr
$("tr:gt(3)").css("background","#ccc");
});
$("#btn2").click(function(){
//设置索引值等于一的tr
$("tr:lt(3)").css("background","red");
});
$("#btn3").click(function(){
//设置索引值等于一的tr
$(":header").css("background","red");
});
$("#btn4").click(function(){
//设置索引值等于一的tr
$("div:animated").css("background","red");
});
function move(){
$("#move").slideToggle(3000,move);
}
move();
});
</script>
</head>
<body>
<h1>简单选择器h1</h1>
<h2>简单选择器h2</h2>
<div id="move" style="background-color:#00F; width:50px; height:60px; border:1px solid #F0F;">动画</div>
<table width="300" border="1" align="center" style="text-align:center">
<caption>各科总成绩</caption>
<tr>
<td>数学</td>
<td>英语</td>
<td>语文</td>
<td>美术</td>
</tr>
<tr>
<td>99</td>
<td>67</td>
<td>66</td>
<td>1</td>
</tr>
<tr>
<td>89</td>
<td>89</td>
<td>88</td>
<td>3</td>
</tr>
<tr>
<td>78</td>
<td>78</td>
<td>98</td>
<td>5</td>
</tr>
<tr>
<td>56</td>
<td>87</td>
<td>90</td>
<td>8</td>
</tr>
<tr>
<td>78</td>
<td>65</td>
<td>100</td>
<td>5</td>
</tr>
<tr>
<td>45</td>
<td>67</td>
<td>12</td>
<td>6</td>
</tr>
<tr>
<td>67</td>
<td>87</td>
<td>34</td>
<td>7</td>
</tr>
<tr>
<td>90</td>
<td>56</td>
<td>86</td>
<td>9</td>
</tr>
</table>
<input type="button" id="btn0" value="索引值等于1的tr元素">
<input type="button" id="btn1" value="选中索引值大于3的元素">
<input type="button" id="btn2" value="选中索引值小于3的">
<input type="button" id="btn3" value="选取网页中的所有的h1，h2">
<input type="button" id="btn4" value="选中正在执行动画的div">
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
