既然是要学习jquery，当然你要有javaScript的基本功才行，没有的话，还是先学习js再说，
第一步：要加入两个js的插件 （随后可以下载）
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="script/jquery-latest.pack.js"></script>
<!--StartFragment -->
第一个是js主要的插件，第二个是表格用到的插件
第二步：比较简单的一个table
<body>
<table align="center" width="70%" border="0" cellpadding="3"
cellspacing="0" borderColor="#cccccc" bgcolor="#efefef">
<thead>
<tr>
<th>
姓名
</th>
<th>
年龄
</th>
</tr>
</thead>
<tr>
<td>
a
<input type="checkbox" value="c1">
</td>
<td>
b
</td>
</tr>
<tr>
<td>
c
<input type="checkbox" value="c5">
</td>
<td>
d
</td>
</tr>
<tr>
<td>
c
<input type="checkbox" value="c4">
</td>
<td>
d
</td>
</tr>
<tr>
<td>
c
<input type="checkbox" value="c3">
</td>
<td>
d
</td>
</tr>
<tr>
<td>
c
<input type="checkbox" value="c2">
</td>
<td>
d
</td>
</tr>
</table>
</body>
第三步：
<style type="text/css">
th {
background: #6E6E6E;
color: #FFFFFF;
line-height: 20px;
height: 30px;
}
/*td 不是必须设置的 只是为td设置一些，好看点*/
td {
padding: 6px 11px;
border-bottom: 1px solid #95bce2;
vertical-align: top;
text-align: center;
}
tr.over td {
background: #cccccc; /*这个将是鼠标高亮行的背景色 这是必须设置的*/
}
第四步：现在是关键了
<script>
$(document).ready( function() {
//如果鼠标移表格的tr上时，执行函数
$("table tr").mouseover(function(){$(this).addClass("over")}),
//鼠标移出tr时，执行函数
$("table tr").mouseout(function(){$(this).removeClass("over")});
});
</script>
ok了，
主要是要用到插件
当然不用表格插件也可以作出这种效果
如：
$(document).ready( function() {
$("table td").mouseout( function() {
$(this).parent().find("td").each(function(i){ $(this).css({color:"black",background: '#efefef' }) });
});
$("table td").mouseover( function() {
$(this).parent().find("td").each(function(i){ $(this).css({color:"red",background: '#cccccc' }) });
});
});
$("table td")：表格的所有td
$(this).parent()：这个td的父元素 tr
$(this).parent().find("td").each(function(i){ }):然后通过这个父元素节点找到下边的所有的子元素（所有的td）
开始循环，
没找到一个td，就执行这个函数：
$(this).css({color:"black",background: '#efefef' }) 这里的this就是每一个td，然后css
分享到：
- 2009-08-05 23:42
- 浏览 3754
- 评论(1)
- 论坛回复 / 浏览 (1 / 5243)
- 查看更多
相关推荐
通过以上步骤，当用户将鼠标移动到图标上时，图标就会根据预设的样式进行高亮显示，鼠标移开后恢复原状。这种动态效果不仅使用户界面更加生动，还可以引导用户了解可交互的元素，提高网站的易用性。 在实际项目中，...
本文将深入探讨如何使用jQuery实现鼠标滑过产品图片时，背景高亮闪烁显示的效果，这个功能在电商网站中十分常见，能够吸引用户的注意力并提升用户体验。 首先，我们需要了解基本的HTML结构。在产品展示页面中，每个...
总的来说，使用jQuery实现“鼠标经过图片高亮显示”的效果，是提高网页导航互动性和吸引力的有效方法。通过结合HTML、CSS和jQuery，我们可以创建出各种各样的视觉效果，使用户在浏览网站时享受到更好的交互体验。
本教程将深入探讨如何利用jQuery创建炫酷的鼠标滑过菜单时高亮菜单项的动画特效。 首先，我们需要在HTML结构中设置基础的菜单布局。一个常见的菜单结构可能如下： ```html <li><a href="#">菜单1</a></li> <li>...
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示
本教程将深入探讨如何利用jQuery的`hover`事件实现鼠标悬停时九宫格图片的高亮显示效果。这个效果可以增强用户对网页内容的互动体验，使用户更容易注意到并操作特定的图像元素。 首先，我们需要理解`hover`事件。在...
《jQuery实现中国地图选中省份城市高亮显示的详解》 在网页开发中，有时候我们需要实现一种功能，即用户点击地图上的某个省份或城市时，该区域会高亮显示，以提供直观的信息交互。这个需求在jQuery库的支持下，可以...
"jQuery+CSS实现图片感应鼠标高亮显示当前图片"是一个常见的交互功能，它使得用户在鼠标悬停于图片上时，图片会自动高亮，突出显示当前被关注的图片，从而增强用户的视觉反馈。下面将详细解释如何使用jQuery和CSS来...
标题“鼠标滑过高亮显示图片”涉及到的是网页交互设计中的一种常见功能，即当鼠标光标悬停在图片上时，图片会呈现出高亮或突出显示的效果。这种效果可以增加用户体验，帮助用户更加清晰地看到被鼠标指向的部分，常...
摘要:脚本资源,jQuery,jFade,图片渐显 jFade图像特效处理插件，基于jQuery的图片特效，鼠标经过图标高亮显示，也就是图片渐显效果。用jquery制作相册的时候，是一个不错的特效，网上使用挺广泛的。
"jQuery鼠标滑过产品图片背景高亮闪烁显示"是一个常见的动态效果，它可以使用户在浏览产品时更容易注意到并吸引他们的注意力。这种效果通常用于电子商务网站的产品展示，使用户在鼠标悬停时能够更清晰地看到产品的...
首先，jQuery高亮图片框通常指的是在用户交互（如点击或鼠标悬停）时，图片框会以特定方式突出显示，例如改变边框颜色、添加阴影效果或者调整透明度。要实现这个效果，可以使用jQuery的选择器来选中图片框元素，然后...
而通过添加交互效果，如鼠标经过时的高亮显示，可以提升用户体验，使导航更加直观且吸引人。本压缩包中的资源是使用jQuery实现的一个类似百度新闻的导航条高亮特效源码。jQuery是一个轻量级、高性能的JavaScript库，...
### 使用jQuery实现图片高亮显示 #### 背景与目的 在网页设计与开发过程中，经常需要通过一些视觉效果来提升用户体验。其中，“图片高亮”是一种常见的交互方式，当用户将鼠标悬停在某张图片上时，该图片会变得更加...
适合做网站上会员头像排列效果，当鼠标悬停在头像上，当前头像高亮显示，并显示对应的文字说明，效果很不错 使用方法： 1、在网页head中引入lanrenzhijia.css样式以及jquery库 2、将html代码复制到你...
在本教程中，我们将深入探讨如何利用jQuery实现一个功能：当鼠标滑过表格时，使得行背景色发生变化，即所谓的“鼠标悬停高亮”效果。这个效果可以提升用户体验，帮助用户更清楚地识别和跟踪选中的表格行。 首先，...
本示例源码主要涉及的是如何利用JavaScript实现一种常见的网页导航菜单效果：当鼠标滑过一级菜单时，对应的二级甚至三级菜单高亮显示，形成一个垂直的多层次导航结构。这样的设计既提升了用户体验，也使网站的导航...