jquery交替变换颜色的三种方法 实例代码
<!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>even and odd</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
alert("第一种");
$("tbody tr:even").css("background-color", "red");
$("tbody tr:odd").css("background-color", "yellow");
alert("第二种");
$("tbody tr").each(function (index){
alert(index);
if(0 == index%2)
{
$(this).css("background-color", "blue");
}
if(1 == index%2)
{
$(this).css("background-color", "green");
}
});
alert("第三种");
rows = document.getElementsByTagName("tr");
var length = rows.length;
for(var i=0; i< length;i++){
alert(i);
if(0==i%2){
rows[i].style.backgroundColor="#ffff00";
}else
{
rows[i].style.backgroundColor="#0000FF";
}
}
});
</script>
</head>
<body>
<table border="1">
<tbody >
<tr> <td>aaa</td> <td>aaa</td> <td>aaa</td></tr>
<tr> <td>bbb</td> <td>bbb</td> <td>bbb</td></tr>
<tr> <td>aaa</td> <td>aaa</td> <td>aaa</td></tr>
<tr> <td>bbb</td> <td>bbb</td> <td>bbb</td></tr>
<tr> <td>aaa</td> <td>aaa</td> <td>aaa</td></tr>
<tr> <td>bbb</td> <td>bbb</td> <td>bbb</td></tr>
</tbody>
</table>
</body>
</html>
相关文章
这篇文章主要介绍了jQuery实现鼠标单击网页文字后在文本框显示的方法,可实现鼠标点击上方文字即可在下方勾选处文本框显示对应文字的效果,涉及jQuery鼠标事件及链式操作的相关技巧,需要的朋友可以参考下2015-05-05
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
这篇文章主要介绍了jQuery实现响应鼠标事件的图片透明效果,涉及jQuery鼠标事件及fadeTo函数的相关使用技巧,需要的朋友可以参考下2016-06-06
需要有个右下角弹层提示公告的，下面分享早些时候自己编写，以及现在还在应用的自动弹层，需要的朋友可以参考下2013-11-11
这篇文章主要介为大家详细绍了jquery小火箭返回顶部特效，当用户浏览到网页的最下端时，点击右下角的火箭可以返回到页面最顶部，滚动效果平滑，有需要的小伙伴可以参考下。2015-08-08
trim 函数在firefox 下面使用没有问题，但是在IE下就报错，下面是可行的解决方法，大家可以看看2014-09-09
这篇文章介绍了Jquery增加鼠标中间功能mousewheel的实例代码，有需要的朋友可以参考一下2013-09-09
在浏览一些网站，尤其是一些小说网站的时候，都会有修改页面背景颜色的地方，这个是用jquery可以做到2014-06-06
这篇文章主要为大家详细介绍了jquery插件实现代码雨特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
JQuery WEUI Select 组件增加搜索栏示例demo
这篇文章主要介绍了JQuery WEUI Select 组件增加搜索栏示例demo,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Jquery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，其可以使用jQuery里的方法，本文给大家介绍Jquery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，其可以使用jQuery里的方法。感兴趣的朋友可以参考下2015-10-10
最新评论