jquery是继prototype之后有一个优秀的框架。它是轻量级的js库,并且兼容性也非常的强,
他可以使用户更方便的处理HTML documents、events、实现动画效果,并且方便地为网站提
供ajax交互。
首先使用jquery的前提是包含一个jquery的js的文件
<script src="jquery.js">
下面就用普通的方法和用jquery的方法实现的各行变色来看看jquery的强大之处:
<!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:#F00;
}
.two{
background-color:#9F0;
}
</style>
<script language="javascript" type="text/javascript" src="../include/jquery.js">
</script>
<script language="javascript" type="text/javascript">
function gehang(){
//1)用普通的方式实现表格的隔行变色
//获取表格的所有的tr的长度
var trlist=document.getElementById("tr");
for(var i=0;i<trlist.length;i++){
if(i%2==0){
trlist[i].className="one";
}else{
trlist[i].className="two";
}
}
}
//2)使用jquery实现表格的隔行变色效果
$(document).ready(function (){
//even:查找表格的1、3、5··行(也就是索引值0、2、4···)
$("tr:even").addClass("one");
//odd:查找表格的2、4、6行(也就是索引值1、3、5···)
$("tr:odd").addClass("two");
});
</script>
</head>
<body οnlοad="gehang()">
<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>
</body>
</html>
注意:在使用jquery的方法的时候就不用在body中加载gehang()这个函数啦