jqueryhover jQuery实现表格隔行换色
大家好，如果您还对jqueryhover不太了解，没有关系，今天就由本站为大家分享jqueryhover的知识，包括jQuery实现表格隔行换色的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
jQuery实现表格隔行换色
本文实例为大家分享了jQuery实现表格隔行换色的具体代码，供大家参考，具体内容如下
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title>使用JQ完成表格隔行换色</title>
<script
src="js/jquery.min.js"></script>
<script>
$(function()
{
$("tbody
tr:odd").css("background-color","aquamarine");
$("tbody
tr:even").css("background-color","bisque");
var
tb
=
$("tbody
tr");
var
oldColor;
for(var
i=0;i<tb.length;i++)
{
//alert(oldColor);
$("tbody
tr")[i].onmouseover
=
function()
{
oldColor
=
this.style.backgroundColor;
this.style.backgroundColor
=
"yellow";
}
$("tbody
tr")[i].onmouseout
=
function()
{
this.style.backgroundColor
=
oldColor;
}
}
});
</script>
</head>
<body>
<table
id="tbl"
border="1"
border-collapse="collapse"
align="center"
cellspacing="0"
cellpadding="5"
width="400"
height="20">
<thead>
<tr>
<th>编号</th><th>姓名</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>张三</td><td>12</td>
</tr>
<tr>
<td>2</td><td>李四</td><td>22</td>
</tr>
<tr>
<td>3</td><td>王五</td><td>13</td>
</tr>
<tr>
<td>4</td><td>马六</td><td>14</td>
</tr>
<tr>
<td>5</td><td>伍六七</td><td>17</td>
</tr>
<tr>
<td>6</td><td>梅花十三</td><td>17</td>
</tr>
</tbody>
</table>
</body>
</html>
疑问：为什么this.style.backgroundColor
=
oldColor中的this不能用$("tbody
tr")[i]代替？？
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:jquery实现表格隔行换色效果jQuery插件实现表格隔行换色且感应鼠标高亮行变色使用jquery
hover事件实现表格的隔行换色功能示例基于Jquery的表格隔行换色，移动换色，点击换色插件
jquery函数
var add_class=function(){
$(this).addClass('hover');
};
var remove_class=function(){
$(this).removeClass('hover');
};
$('.test').click(function(){
alert("thank you");
}).hover(add_class, remove_class);
【补充】：
jquery函数大全
Attribute：
$(”p”).addClass(css中定义的样式类型；);给某个元素添加样式
$(”img”).attr({src:”test.jpg”,alt:”test Image”});给某个元素添加属性/值，参数是
map
$(”img”).attr(”src”,”test.jpg”);给某个元素添加属性/值
$(”img”).attr(”title”, function(){ return this.src});给某个元素添加属性/值
$(”元素名称”).html();获得该元素内的内容（元素，文本等）
$(”元素名称”).html(”<b>new stuff</b>”);给某元素设置内容
$(”元素名称”).removeAttr(”属性名称”)给某元素删除指定的属性以及该属性的值
$(”元素名称”).removeClass(”class”)给某元素删除指定的样式
$(”元素名称”).text();获得该元素的文本
$(”元素名称”).text(value);设置该元素的文本值为value
$(”元素名称”).toggleClass(class)当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$(”input元素名称”).val();获取input元素的值
$(”input元素名称”).val(value);设置input元素的值为value Manipulation：
$(”元素名称”).after(content);在匹配元素后面添加内容
jquery图片轮播思路
使用jQuery做轮播图是网页特效中很常见的一个特效。
工具原料：编辑器、浏览器、jQuery
1、实现的总体思路：
首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。
2、实现的具体事件处理思路：
事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。
3、简单的代码示例如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>jquery轮播效果图</title>
<scripttype="text/javascript"src="scripts/jquery-1.9.1.js"></script>
<styletype="text/css">
*{
padding:0px;
margin:0px;
}
a{
text-decoration:none;
}
ul{
list-style:outsidenonenone;
}
.slider,.slider-panelimg,.slider-extra{
width:650px;
height:413px;
}
.slider{
text-align:center;
margin:30pxauto;
position:relative;
}
.slider-panel,.slider-nav,.slider-pre,.slider-next{
position:absolute;
z-index:8;
}
.slider-panel{
position:absolute;
}
.slider-panelimg{
border:none;
}
.slider-extra{
position:relative;
}
.slider-nav{
margin-left:-51px;
position:absolute;
left:50%;
bottom:4px;
}
.slider-navli{
background:#3e3e3e;
border-radius:50%;
color:#fff;
cursor:pointer;
margin:02px;
overflow:hidden;
text-align:center;
display:inline-block;
height:18px;
line-height:18px;
width:18px;
}
.slider-nav.slider-item-selected{
background:blue;
}
.slider-pagea{
background:rgba(0,0,0,0.2);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color:#fff;
text-align:center;
display:block;
font-family:"simsun";
font-size:22px;
width:28px;
height:62px;
line-height:62px;
margin-top:-31px;
position:absolute;
top:50%;
}
.slider-pagea:HOVER{
background:rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next{
left:100%;
margin-left:-28px;
}
</style>
<scripttype="text/javascript">
$(document).ready(function(){
varlength,
currentIndex=0,
interval,
hasStarted=false,//是否已经开始轮播
t=3000;//轮播时间间隔
length=$('.slider-panel').length;
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
$('.slider-page').hide();
//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel,.slider-pre,.slider-next').hover(function(){
stop();
$('.slider-page').show();
},function(){
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e){
stop();
varpreIndex=$(".slider-item").filter(".slider-item-selected").index();
currentIndex=$(this).index();
play(preIndex,currentIndex);
},function(){
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click',function(){
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click',function(){
next();
});
/**
*向前翻页
*/
functionpre(){
varpreIndex=currentIndex;
currentIndex=(--currentIndex+length)%length;
play(preIndex,currentIndex);
}
/**
*向后翻页
*/
functionnext(){
varpreIndex=currentIndex;
currentIndex=++currentIndex%length;
play(preIndex,currentIndex);
}
/**
*从preIndex页翻到currentIndex页
*preIndex整数，翻页的起始页
*currentIndex整数，翻到的那页
*/
functionplay(preIndex,currentIndex){
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
*开始轮播
*/
functionstart(){
if(!hasStarted){
hasStarted=true;
interval=setInterval(next,t);
}
}
/**
*停止轮播
*/
functionstop(){
clearInterval(interval);
hasStarted=false;
}
//开始轮播
start();
});
</script>
</head>
<body>
<divclass="slider">
<ulclass="slider-main">
<liclass="slider-panel">
<arel="external nofollow" href="
title="图片1"src="images/1.jpg"></a>
</li>
<liclass="slider-panel">
<arel="external nofollow" rel="external nofollow" rel="external nofollow" href="#"><imgtitle="图片2"src="images/1.jpg"></a>
</li>
<liclass="slider-panel">
<arel="external nofollow" rel="external nofollow" rel="external nofollow" href="#"><imgtitle="图片3"src="images/1.jpg"></a>
</li>
<liclass="slider-panel">
<arel="external nofollow" rel="external nofollow" rel="external nofollow" href="#"><imgtitle="图片4"src="images/1.jpg"></a>
</li>
</ul>
<divclass="slider-extra">
<ulclass="slider-nav">
<liclass="slider-item">1</li>
<liclass="slider-item">2</li>
<liclass="slider-item">3</li>
<liclass="slider-item">4</li>
</ul>
<divclass="slider-page">
<aclass="slider-pre"rel="external nofollow" rel="external nofollow" href="javascript:;;"><</a>
<aclass="slider-next"rel="external nofollow" rel="external nofollow" href="javascript:;;">></a>
</div>
</div>
</div>
</body>
</html>
文章分享结束，jqueryhover和jQuery实现表格隔行换色的答案你都知道了吗？欢迎再次光临本站哦！