题目描述
仿股票等表单显示数据，各行变色，外加高亮显示，具体表现如下图：
1）所有展示数据各行变色，颜色自定义。
2）鼠标进入后高亮显示，移开后恢复。
训练目标
学会使用 jQuery 的选择器，熟练样式操作 css()。
训练提示
1.获取奇数行和偶数行
2.设置不一样的颜色
3.鼠标进入设置其他颜色
4.移开恢复正常或者鼠标进入重新设置隔行变色覆盖之前操作 参考方案 mouseover事件，或者 hover事件均可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板</title>
<script src="/jQ20220215Day44/js/jquery3.6.0.js"></script>
<!-- jquery地址 -->
<style>
div{
background-color: #fff;
}
</style>
</head>
<body>
<div>- 隔行变色加高亮显示</div><div>- 隔行变色加高亮显示</div>
<div>- 隔行变色加高亮显示</div><div>- 隔行变色加高亮显示</div><div>- 隔行变色加高亮显示</div>
<script>
$(function (){
//jQuery设置css样式
$('div:odd').css('background-color','grey')
$("div:odd").mouseover(function (){
//鼠标移动到当前目标
// $(this) jQuery 当前元素 this不要加引号
$(this).css('background','red')
})
$('div:odd').mouseout(function (){
//鼠标不在当前目标上
$(this).css('background-color','grey')
})
$('div:even').css('background','skyblue')
$("div:even").mouseover(function (){
//当鼠标移动到当前目标上
// $(this) jQuery 当前元素 this不要加引号
$(this).css('background','blue')
})
$('div:even').mouseout(function (){
//当鼠标不在当前目标上的 样式
$(this).css('background','skyblue')
})
$('div:eq(2)').css('background','orange')
$("div:eq(2)").mouseover(function (){
//当鼠标移动到当前目标上
// $(this) jQuery 当前元素 this不要加引号
$(this).css('background','red')
})
$('div:eq(2)').mouseout(function (){
//当鼠标不在当前目标上的 样式
$(this).css('background','orange')
})
})
</script>
</body>
</html>版权声明：本文为qq_57731353原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。