列表隔行变色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 点击按钮
$("#btn").click(function(){
// 奇----红色,偶----黄色
// odd----奇数的
// even----偶数
$("ul>li:even").css("backgroundColor","red");
$("ul>li:odd").css("backgroundColor","yellow");
});
});
</script>
</head>
<body>
<input type="button" value="隔行变色" id="btn">
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
<script>
// $(function () {
// //就这么写,会不会报错,会不会有效果
// var lis = $("li");
// for (var i = 0; i < lis.length; i++) {
// if (i % 2 == 0) {
// // lis:jq对象
// // lis[i]:DOM对象,通过下标取出来了
// lis[i].style.backgroundColor = "pink";
// } else {
// lis[i].style.backgroundColor = "hotpink";
// }
// }
// });
</script>
</body>
</html>
显示和隐藏下拉菜单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(imgs/bg.jpg);
}
.wrap li {
background-image: url(imgs/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
// 页面加载事件
$(function(){
// 获取ul中所有的li,然后注册鼠标进入和鼠标离开事件
$(".wrap>ul>li").mouseenter(function(){
// 当前li中的所有的子元素,再从所有的子元素中找ul
$(this).children('ul').stop().show(500);
});
// 鼠标离开
$(".wrap>ul>li").mouseleave(function(){
$(this).children('ul').stop().hide(500);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul class="ul">
<li><a href="javascript:void(0);">二级菜单11</a></li>
<li><a href="javascript:void(0);">二级菜单12</a></li>
<li><a href="javascript:void(0);">二级菜单13</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li><a href="javascript:void(0);">二级菜单21</a></li>
<li><a href="javascript:void(0);">二级菜单22</a></li>
<li><a href="javascript:void(0);">二级菜单23</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li><a href="javascript:void(0);">二级菜单31</a></li>
<li><a href="javascript:void(0);">二级菜单32</a></li>
<li><a href="javascript:void(0);">二级菜单33</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
列表的高亮显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
list-style-type: none;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
// 高亮显示的效果:鼠标进入,当前的li有背景颜色,离开颜色就干掉了
// 获取ul中所有的li标签,添加鼠标进入和鼠标离开事件
// 页面加载
// $(function(){
// // 鼠标进入
// $("#uu>li").mouseenter(function(){
// $(this).css("backgroundColor","red");
// });
// // 鼠标离开
// $("#uu>li").mouseleave(function(){
// $(this).css("backgroundColor","");
// });
// });
// $(function(){
// // 鼠标进入
// $("#uu>li").mouseenter(function(){
// $(this).css("backgroundColor","red");
// }).mouseleave(function(){
// $(this).css("backgroundColor","");
// });
// });
// $(function(){
// // 鼠标进入
// $("#uu>li").mouseenter(function(){
// $(this).css("backgroundColor","red");
// });
// // 鼠标离开事件
// $("#uu>li").mouseleave(function(){
// $(this).css("backgroundColor","");
// });
// // 点击事件:当前的li中的字体样式改变
// $("#uu>li").click(function(){
// $(this).css("color","green");
// $(this).css("fontSize","29px");
// $(this).css("fontFamily","Century Gothic");
// });
// });
// 链式编程
$(function(){
// 鼠标进入
$("#uu>li").mouseenter(function(){
$(this).css("backgroundColor","red");
}).mouseleave(function(){
$(this).css("backgroundColor","");
}).click(function(){
$(this).css("color","green").css("fontSize","29px")
.css("fontFamily","Century Gothic");
});
});
</script>
</head>
<body>
<ul id="uu">
<li>倩女幽魂</li>
<li>海阔天空</li>
<li>千纸鹤</li>
<li>真的爱你</li>
<li>丑八怪</li>
<li>突然的自我</li>
<li>左手右手</li>
<li>喜洋洋</li>
<li>一路顺风</li>
</ul>
</body>
</html>