jquery交替变换颜色的三种方法 实例代码

最新推荐文章于 2022-03-15 11:14:34 发布
最新推荐文章于 2022-03-15 11:14:34 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： Javascript教程
这篇文章主要介绍了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 jquery交替变换颜色 - www.jbxue.com</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>

梦想照进他的现实
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery获取随机颜色的实例代码
10-18
主要介绍了jQuery获取随机颜色的实例代码,非常不错，具有一定的参考借鉴价值，感兴趣的朋友跟随脚本之家小编来学习吧
jQuery实现表格颜色交替显示的方法
10-24
主要介绍了jQuery实现表格颜色交替显示的方法,涉及jQuery操作表格样式的技巧,非常具有实用价值,需要的朋友可以参考下
js代码文字颜色交替变换
05-04
实现一个不错的网页特效，可以直接演示.jquery特效很喜欢 适合商城
jQuery 行背景颜色的交替显示(隔行变色)实现代码
01-21
一些css的定义，可以根据需要自己选择。//显示单双行显示不同背景色【方法一】： // $(“#UL_id li:even”).attr(“className”,”redClass”); //显示单双行显示不同背景色【方法二】： $(“#UL_id li:even”).addClass(“redClass”); <ul id=”UL_id”> <li>单数</li> <li>双数</li> <li>双数</li> </ul> odd:单 even:双 jQuery 表格隔行变色代码li隔行换色改进版JS控制表格隔行变色
jQuery版本升级踩坑大全
10-23
主要介绍了jQuery版本升级踩坑大全的相关资料,需要的朋友可以参考下
JavaScript的颜色切换
weixin_44549398的博客
09-10 658
我们要网页面切换颜色butoon标签按钮肯定是不能少的，在上面写上内联样式和ID值，至于button里面的内容随便。 最后在原生js里面获取四个button标签的ID值，设置button四个不同的颜色样式，之后在里面给body文档标签添加上背景颜色。（注：document和body的两个文档是不同的，body是文档里面的内容，而document则是整个文档，两个文档类型不一样不要搞混喽） ...
jquery实现点击按钮循环变色功能的3种方式
just_learing的博客
02-28 2996
点按钮换色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .changeRed{ background-color:red; } </style> </head> <body> <ul> <li &gt
jQuery_01入门&选择器
m0_64043477的博客
03-15 1029
jQuery_01入门&选择器
利用jQuery完成一个简单的按钮颜色变化（笔记）
Wellfancy的博客
08-03 3140
在HTML和CSS中我们想要完成一个对按钮颜色的设置，虽然也可以做到想要的效果，但过程比较繁琐，利用jQuery我们就可以轻松的完成这件事情。 假设现在我们有一组按钮 当我们点击其中一个的时候让它变成粉色，再点击另一个后除了被点击的按钮全部为原始颜色，我们应该怎样做呢 其实只需要简单的几行代码即可完成 <script> $(function(){ $('Button').click(function(){ //先设置点击的按钮颜色变为粉色 .
三种动态加载js的jquery实例代码另附去除js方法
12-12
代码如下: !– 这里为你提供了三种动态加载js的jquery实例代码哦，由于jquery是为用户提供方便的，所以利用jquery动态加载文件只要一句话$.getscript(“test.js”);就ok了。 <!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=”cont
jquery动态加载js三种方法实例
01-19
代码如下:<!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=gb2312″ /><title>jquery 动态加载js三种方法</title>//方法一<script language=”
jquery不支持toggle()高(新)版本的问题解决
10-21
主要介绍了jquery不支持toggle()高(新)版本的问题解决的相关资料,需要的朋友可以参考下
js 实现 设置表格的交替行颜色
03-31
js 实现 设置表格的交替行颜色! 值得下载看看!资源免费,大家分享!!
【JS 每日练习】实现颜色变换
boia
04-14 1685
红: 绿: 蓝: 有趣的颜色变化 function changeColor() { $("font").style.color = toRGB(); } function toRGB() { var red = parseInt($("red").value); var green = parseInt($("green").value); var blue = pa
JS练习：定时器--背景颜色交替变换
weixin_34211761的博客
10-18 2821
代码： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200...
用JS控制表格的交替颜色
lampsunny的专栏
04-09 1129
用JS控制表格的交替颜色 window.onload = function() { doubleBgColor(document.getElementById("table1"),"#cecece","#ececec") } function doubleBgColor(Table,Bg1,Bg2) { for (var i=0;i<Table.rows.length;i++) Table
jQuery设置背景颜色
热门推荐
Java技术
07-16 2万+
<script type="text/javascript"> $(document.body).css("background","pink") </script>
表格交替色，单击改变行颜色等
573's 自由天空下
07-15 1830
关于表格颜色 var tmpColor=""; var clickcolor="#aac6f8"; var arrBg=["#ffffff","#d8e9fd"]; //表格交替色 ///////////////单击改变行颜色//////////////// function clickto(){source=event.srcElement; if (source.tagName=="
jquery滑动横向二级菜单代码实例
最新发布
01-27
以下是一个使用jQuery实现滑动横向二级菜单的代码实例： ```html <!DOCTYPE html> <html> <head> <title>jQuery滑动横向二级菜单</title> <style> .menu { width: 200px; background-color: #f1f1f1; padding: 10px; } .menu ul { list-style-type: none; padding: 0; margin: 0; } .menu ul li { position: relative; padding: 10px; cursor: pointer; } .menu ul li ul { display: none; position: absolute; top: 0; left: 100%; background-color: #fff; padding: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .menu ul li:hover ul { display: block; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('.menu ul li').hover(function() { $(this).children('ul').stop().slideDown(); }, function() { $(this).children('ul').stop().slideUp(); }); }); </script> </head> <body> <div class="menu"> <ul> <li>菜单1 <ul> <li>子菜单1</li> <li>子菜单2</li> <li>子菜单3</li> </ul> </li> <li>菜单2 <ul> <li>子菜单4</li> <li>子菜单5</li> <li>子菜单6</li> </ul> </li> <li>菜单3 <ul> <li>子菜单7</li> <li>子菜单8</li> <li>子菜单9</li> </ul> </li> </ul> </div> </body> </html> ``` 这段代码创建了一个横向滑动的二级菜单。当鼠标悬停在菜单项上时，子菜单会以滑动的方式展开，鼠标离开时子菜单会收起。你可以根据需要修改菜单的样式和内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值