<!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>无标题文档</title>
<script src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" >
$(document).ready(function(){
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
$(".stripe tr:even").addClass("alt");
});
</script>
<style>
th{background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td{
padding:6px 11px;
border-bottom:solid 1px #093;
vertical-align:top;
text-align:center;
}
td*{padding:6px 11px;}
tr.alt td{
background:#ecf6fc;}
tr.over td{
background:#bcd4ec;}
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellpadding="0" cellspacing="0" id="tdata">
<tr>
<td>asdfasdfasdf</td>
<td>f342</td>
<td>rtyr</td>
<td>5y5</td>
<td>asdfasdfasdf</td>
</tr>
<tr>
<td>asdfasdfasdf</td>
<td>f342</td>
<td>rtyr</td>
<td>5y5</td>
<td>asdfasdfasdf</td>
</tr>
<tr>
<td>asdfasdfasdf</td>
<td>f342</td>
<td>rtyr</td>
<td>5y5</td>
<td>asdfasdfasdf</td>
</tr>
<tr>
<td>asdfasdfasdf</td>
<td>f342</td>
<td>rtyr</td>
<td>5y5</td>
<td>asdfasdfasdf</td>
</tr>
</table>
</body>
</html>
说明：.style的意思是 获取元素节点 ，是指.style样式下的某个元素，所以上述红色背景区域可以有以下三中方式表示！
1.$("table tr") //table下面的 tr 元素 但是这个是全局的
2.$(".style tr") //应用了这个样式的具体元素 这个是局部的
3.$("#tdata tr") //#号是id名称，意味tdata下面的tr！
mouseover mouseout 是鼠标移动时间
addClass removeClass 增加和删除css样式 也可以直接添加 用.css("央视名称","属性值")的方法替换addClass
注意：几乎每一步JQuery操作都会返回一个JQuery对象，所以可以进行链式操作，所以上面的mousevoer，mouseout同时在一起！
相关推荐
本文将深入探讨“jquery入门之双色表格”，教你如何利用jQuery实现一个鼠标悬停时背景颜色变化的双色表格效果。 首先，我们需要理解HTML结构。在`sstable.html`文件中，通常会包含一个表格元素`<table>`，里面包含...
<title>jQuery双色表格 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> $(document).ready(function(){ $("table tr:even").css("background-color", "#F2F2F2"); $("table tr:odd")....
7. 快速制作双色表格：文中提到了如何使用jQuery来制作双色表格，这展示了jQuery在操作DOM方面的便捷性。尽管这部分内容没有详细展开，但我们可以得知，通过少量的jQuery代码即可实现复杂的页面效果。 8. jQuery的...
jQuery使得制作双色表格变得极其简单。在传统方法中，这可能需要大量的CSS或JavaScript代码。而在jQuery中，只需几行代码，就能轻松实现表格行交替颜色的效果，增强了用户体验。 6. **jQuery的适用场景**： ...
文档中提到了如何使用jQuery来快速制作双色表格的示例，展示出了jQuery在实际应用中的便捷性。与传统的DOM操作相比，使用jQuery进行DOM操作更加直观、简洁，并且易于实现复杂的交互效果。 此外，文档还提到了jQuery...
##### 5.2 双色表格制作 - **目的**：通过简单的代码实现交替颜色的表格行，提升用户体验。 - **实现步骤**： 1. 引入jQuery库文件。 2. 使用CSS设置基础样式。 3. 编写jQuery代码，通过`index()`方法判断行号，...
2. **制作双色表格** - **需求**：创建一个双色交替的表格，以提高可读性。 - **实现方式**：利用jQuery的链式调用特性，结合`:even`和`:odd`选择器来分别设置奇数行和偶数行的样式。 ```javascript $("table ...
#### 第三天：轻松制作双色表格 ##### **3.1 传统方法的局限性** - 使用纯JavaScript或CSS创建双色表格通常较为繁琐，需要编写较多的代码。 - 难以维护，尤其是当表格数据发生变化时。 ##### **3.2 使用jQuery...
- **创建双色表格**：利用jQuery可以轻松实现复杂的布局和样式调整。通过选择器和CSS操作，仅需几行代码即可实现传统方法下数十行才能完成的双色表格效果。 ```html <tr class="odd"></tr> <tr class="even"></...
#### Day 2: 很容易的制作双色表格 在网页设计中，双色表格可以提高可读性和美观度。使用jQuery，只需几行代码即可轻松实现这一效果： ```javascript $('table tr:even').addClass('even'); $('table tr:odd')....