`
mamaoyuan625
  • 浏览: 177243 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

jquery的使用:鼠标移过高亮显示

阅读更多

既然是要学习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

 

 

  • js.rar (33 KB)
  • 下载次数: 197
分享到:
评论
1 楼 nevernam 2009-11-20  
请教一下楼主,我原来也是这么写实现高亮的,代码完全一样,但是使用了tablesorter插件的时候,我为了实现隔行换色的现实功能,在初始化tablesorter的时候设置了widgets: ['zebra'] 属性,这时候高亮的功能就失效了.

因为还是js新手,对widgets这个实现即使看了源码还是不得要领,找不到问题的原因...不知楼主有没此问题的经验呢?

相关推荐

    jQuery 图片特效,鼠标经过图标高亮显示

    通过以上步骤,当用户将鼠标移动到图标上时,图标就会根据预设的样式进行高亮显示,鼠标移开后恢复原状。这种动态效果不仅使用户界面更加生动,还可以引导用户了解可交互的元素,提高网站的易用性。 在实际项目中,...

    jQuery 鼠标滑过产品图片背景高亮闪烁显示-20130717

    本文将深入探讨如何使用jQuery实现鼠标滑过产品图片时,背景高亮闪烁显示的效果,这个功能在电商网站中十分常见,能够吸引用户的注意力并提升用户体验。 首先,我们需要了解基本的HTML结构。在产品展示页面中,每个...

    jquery页面导航 鼠标经过图片高亮显示

    总的来说,使用jQuery实现“鼠标经过图片高亮显示”的效果,是提高网页导航互动性和吸引力的有效方法。通过结合HTML、CSS和jQuery,我们可以创建出各种各样的视觉效果,使用户在浏览网站时享受到更好的交互体验。

    jQuery炫酷鼠标滑过菜单高亮菜单项动画特效

    本教程将深入探讨如何利用jQuery创建炫酷的鼠标滑过菜单时高亮菜单项的动画特效。 首先,我们需要在HTML结构中设置基础的菜单布局。一个常见的菜单结构可能如下: ```html &lt;li&gt;&lt;a href="#"&gt;菜单1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;...

    jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示

    jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示

    jquery hover事件鼠标悬停九宫格图片高亮显示代码

    本教程将深入探讨如何利用jQuery的`hover`事件实现鼠标悬停时九宫格图片的高亮显示效果。这个效果可以增强用户对网页内容的互动体验,使用户更容易注意到并操作特定的图像元素。 首先,我们需要理解`hover`事件。在...

    jQuery中国地图选中省份城市高亮显示代码.zip

    《jQuery实现中国地图选中省份城市高亮显示的详解》 在网页开发中,有时候我们需要实现一种功能,即用户点击地图上的某个省份或城市时,该区域会高亮显示,以提供直观的信息交互。这个需求在jQuery库的支持下,可以...

    jQuery+CSS实现图片感应鼠标高亮显示当前图片

    "jQuery+CSS实现图片感应鼠标高亮显示当前图片"是一个常见的交互功能,它使得用户在鼠标悬停于图片上时,图片会自动高亮,突出显示当前被关注的图片,从而增强用户的视觉反馈。下面将详细解释如何使用jQuery和CSS来...

    鼠标滑过高亮显示图片

    标题“鼠标滑过高亮显示图片”涉及到的是网页交互设计中的一种常见功能,即当鼠标光标悬停在图片上时,图片会呈现出高亮或突出显示的效果。这种效果可以增加用户体验,帮助用户更加清晰地看到被鼠标指向的部分,常...

    jQuery jFade 鼠标经过图标高亮显示特效

    摘要:脚本资源,jQuery,jFade,图片渐显  jFade图像特效处理插件,基于jQuery的图片特效,鼠标经过图标高亮显示,也就是图片渐显效果。用jquery制作相册的时候,是一个不错的特效,网上使用挺广泛的。

    jquery鼠标滑过产品图片背景高亮闪烁显示

    "jQuery鼠标滑过产品图片背景高亮闪烁显示"是一个常见的动态效果,它可以使用户在浏览产品时更容易注意到并吸引他们的注意力。这种效果通常用于电子商务网站的产品展示,使用户在鼠标悬停时能够更清晰地看到产品的...

    jquery高亮图片框 jquery图片展示 jquery效果很好

    首先,jQuery高亮图片框通常指的是在用户交互(如点击或鼠标悬停)时,图片框会以特定方式突出显示,例如改变边框颜色、添加阴影效果或者调整透明度。要实现这个效果,可以使用jQuery的选择器来选中图片框元素,然后...

    jQuery实现鼠标经过导航条高亮显示特效源码(仿百度新闻).zip

    而通过添加交互效果,如鼠标经过时的高亮显示,可以提升用户体验,使导航更加直观且吸引人。本压缩包中的资源是使用jQuery实现的一个类似百度新闻的导航条高亮特效源码。jQuery是一个轻量级、高性能的JavaScript库,...

    【JavaScript源代码】jQuery实现图片高亮显示.docx

    ### 使用jQuery实现图片高亮显示 #### 背景与目的 在网页设计与开发过程中,经常需要通过一些视觉效果来提升用户体验。其中,“图片高亮”是一种常见的交互方式,当用户将鼠标悬停在某张图片上时,该图片会变得更加...

    jquery鼠标悬停头像高亮显示说明效果

    适合做网站上会员头像排列效果,当鼠标悬停在头像上,当前头像高亮显示,并显示对应的文字说明,效果很不错 使用方法: 1、在网页head中引入lanrenzhijia.css样式以及jquery库 2、将html代码复制到你...

    jQuery实现鼠标滑过鼠标变色功能

    在本教程中,我们将深入探讨如何利用jQuery实现一个功能:当鼠标滑过表格时,使得行背景色发生变化,即所谓的“鼠标悬停高亮”效果。这个效果可以提升用户体验,帮助用户更清楚地识别和跟踪选中的表格行。 首先,...

    JavaScript实现鼠标滑过高亮显示二级菜单的纵向3级的导航菜单源码

    本示例源码主要涉及的是如何利用JavaScript实现一种常见的网页导航菜单效果:当鼠标滑过一级菜单时,对应的二级甚至三级菜单高亮显示,形成一个垂直的多层次导航结构。这样的设计既提升了用户体验,也使网站的导航...

Global site tag (gtag.js) - Google Analytics