jquery 选择器
jQuery选择器返回的是jQuery对象。
1. 基本选择器
2. 层级选择器
3. 过滤选择器
隔行变色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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 src="jquery-1.12.4.js"></script>
<script>
$(function() {
//下标为偶数，过滤
$("li:even").css("backgroundColor", "red");
$("li:odd").css("backgroundColor", "blue");
});
</script>
</body>
</html>
4. 筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
下拉菜单
<!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: 340px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
}
.wrap li {
border: 1px solid black;
}
.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;
}
.innerul{
margin-left: -1px;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function() {
//mouseover：鼠标经过事件
//mouseout:鼠标离开事件
//mouseenter:鼠标进入事件
//mouseleave：鼠标离开事件
let $li = $(".wrap>ul>li");
let $li2 = $(".wrap>ul>li>ul>li");
//给li注册鼠标经过事件，让自己的ul显示出来
$li.mouseenter(function() {
//找到所有的儿子，并且还得是ul
$(this).children("ul").show();
});
$li.mouseleave(function() {
$(this).children("ul").hide();
});
// 鼠标移入变色
$li2.mouseenter(function(){
$(this).css("backgroundColor", "red")
})
$li2.mouseleave(function(){
$(this).css("backgroundColor", "white")
})
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul class="innerul">
<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 class="innerul">
<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 class="innerul">
<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>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function() {
$(".wrap>ul>li").mouseenter(function() {
$(this).css("opacity", "1").siblings().css("opacity", "0.4");
});
$(".wrap").mouseleave(function() {
//让所有的li都变亮
//$("li");
//$(".wrap li");
//$(".wrap>ul>li")
//$(this).children().children("li");
$(this).find('li').css("opacity", 1);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="images/01.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/02.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/03.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/04.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/05.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/06.jpg" alt="" /></a></li>
</ul>
</div>
</body>
</html>
效果图：
手风琴
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
.parentWrap {
width: 200px;
text-align: center;
margin: 100px auto;
}
.menuGroup {
border: 1px solid #999;
background-color: #e0ecff;
}
.groupTitle {
display: block;
height: 20px;
line-height: 20px;
font-size: 16px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.menuGroup>div {
height: 200px;
background-color: #fff;
display: none;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
//思路分析：
//1. 给所有的span注册点击事件，让当前span的兄弟div显示出来
$(".groupTitle").click(function() {
//下一个兄弟：nextElementSibling
//链式编程：在jQuery里面，方法可以一直调用下去。
$(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
});
});
</script>
</head>
<body>
<ul class="parentWrap">
<li class="menuGroup">
<span class="groupTitle">标题1</span>
<div>我是弹出来的div1</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题2</span>
<div>我是弹出来的div2</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题3</span>
<div>我是弹出来的div3</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题4</span>
<div>我是弹出来的div4</div>
</li>
</ul>
</body>
</html>
效果图：
鼠标触摸显示相应图片
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
width: 200px;
height: 108px;
}
.wrapper {
width: 298px;
height: 108px;
margin: 100px auto 0;
border: 1px solid red;
overflow: hidden;
}
#left,
#center,
#right {
float: left;
}
#left li a,
#right li a {
display: block;
width: 48px;
height: 36px;
border-bottom: 1px solid red;
line-height: 36px;
text-align: center;
color: black;
}
#left li a:hover,
#right li a:hover {
background-color: orange;
}
#center {
border-left: 1px solid red;
border-right: 1px solid red;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function() {
$("#left>li").mouseenter(function() {
//让center中对应下标的li显示，其他li隐藏
var idx = $(this).index();
$("#center>li:eq(" + idx + ")").show().siblings().hide();
});
$("#right>li").mouseenter(function() {
var idx = $(this).index() + 3;
$("#center>li").eq(idx).show().siblings().hide();
//$("#center>li").eq(idx) :jq对象
//$("#center>li").get(idx);：js对象
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">小猫1</a></li>
<li><a href="#">小猫2</a></li>
<li><a href="#">小猫3</a></li>
</ul>
<ul id="center">
<li>
<a href="#">
<img src="https://img2.baidu.com/it/u=2084192088,1233533186&fm=26&fmt=auto&gp=0.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="https://img1.baidu.com/it/u=777814957,1926038970&fm=26&fmt=auto&gp=0.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="https://img1.baidu.com/it/u=3751283645,2388028155&fm=26&fmt=auto&gp=0.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="https://img2.baidu.com/it/u=3543428128,2346503594&fm=26&fmt=auto&gp=0.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="https://img1.baidu.com/it/u=1255960520,649002758&fm=26&fmt=auto&gp=0.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="https://img2.baidu.com/it/u=947063472,2169768602&fm=26&fmt=auto&gp=0.jpg"/>
</a>
</li>
</ul>
<ul id="right">
<li><a href="#">小狗1</a></li>
<li><a href="#">小狗2</a></li>
<li><a href="#">小狗3</a></li>
</ul>
</div>
</body>
</html>
效果图：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
