jquery的简单介绍

最新推荐文章于 2024-09-21 11:29:05 发布

suxiaxuhuanhuan

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量457

点赞数

文章标签： jquery javascript function xhtml prototype html

本文链接：https://blog.csdn.net/suxiaxuhuanhuan/article/details/7370583

版权

jquery是继prototype之后有一个优秀的框架。它是轻量级的js库，并且兼容性也非常的强，

他可以使用户更方便的处理HTML documents、events、实现动画效果，并且方便地为网站提

供ajax交互。

首先使用jquery的前提是包含一个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()这个函数啦