既然是要学习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
- 浏览 3753
- 评论(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实现一种常见的网页导航菜单效果:当鼠标滑过一级菜单时,对应的二级甚至三级菜单高亮显示,形成一个垂直的多层次导航结构。这样的设计既提升了用户体验,也使网站的导航...