实例
运用了6种比较常用的选择器，eq(), parent(), children(), :odd, id, class 这六种选择器，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jquery 6种选择器</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family:"微软雅黑";
font-weight:normal;
overflow:hidden;
}
img{
border:0;
}
ul ,li{
list-style: none;}
.clearfix {
clear: both;
}
.bt a:hover {
color: #aaa;
}
.bt a{
font-size:16px;
color:#226;
}
.bt{
float: left;
line-height:30px;
height:30px;
}
.date{
float:right:
font_size:15px;
color:#226;
margin-left:10px;
}
h2{
float:left;
font_size:16px;
}
.row1_bg{
width: 400px;
margin:0 auto;
border:2px solid #ccc;
order-radius: 50%;
box-shadow: 2px 2px 2px #808080;
}
.row1{
width:100%;
padding:10px;
}
a{
text-decoration:none;
}
.row1 .title h2 .b {
border: 1px solid #e1e1e1;
border-radius: 10px;
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.row1 .title h2 a {
color: #000;
display: block;
padding: 12px 20px;
background-color: #fff;
}
.row1 .title h2 {
float: left;
font-size: 16px;
font-weight: normal;
}
.row1 .title {
}
li {
list-style: none;
}
.row1 .content .c_1 li {
line-height: 34px;
border-bottom: 1px dotted #ddd;
}
.row1 .content {
border: 1px solid #e1e1e1;
border-radius: 6px;
padding: 12px;
border-top-left-radius: 0;
margin-top: -1px;
height: 298px;
}
</style>
</head>
<body>
<div class="row1_bg">
<div class="row1">
<div class="title">
<h2><a href="javascript:void(0)">部门信息</a></h2>
<h2><a href="javascript:void(0)">个人信息</a></h2>
<h2><a href="#">重要通知</a></h2>
<div class="clearfix"></div>
</div>
<div class="content">
<ul class="c_1">
<li>
<div class="bt">
<a href="" id='red'>关于最近禽流感爆发的防范措施</a>
</div>
<span class="date">2018-04-02</span>
<div class="clearfix"></div>
</li>
<li>
<div class="bt">
<a href="" >关于最近禽流感爆发的防范措施</a>
</div>
<span class="date">2018-04-02</span>
<div class="clearfix"></div>
</li>
<li>
<div class="bt">
<a href="" >关于最近禽流感爆发的防范措施</a>
</div>
<span class="date">2018-04-02</span>
<div class="clearfix"></div>
</li>
<li>
<div class="bt">
<a href="" >关于最近禽流感爆发的防范措施</a>
</div>
<span class="date">2018-04-02</span>
<div class="clearfix"></div>
</li>
<li>
<div class="bt">
<a href="" >关于最近禽流感爆发的防范措施</a>
</div>
<span class="date">2018-04-02</span>
<div class="clearfix"></div>
</li>
<li>
<div class="bt">
<a href="" >关于最近禽流感爆发的防范措施</a>
</div>
<span class="date">2018-04-02</span>
<div class="clearfix"></div>
</li>
</ul>
<ul class="c_1">
<li>
<div class="bt">
<a href="" id='green'>提交个人职称信息及简历</a>
</div>
<span class="date">2018-03-01</span>
<div class="clearfix"></div>
</li><li>
<div class="bt">
<a href="" >提交个人职称信息及简历</a>
</div>
<span class="date">2018-03-01</span>
<div class="clearfix"></div>
</li><li>
<div class="bt">
<a href="" >提交个人职称信息及简历</a>
</div>
<span class="date">2018-03-01</span>
<div class="clearfix"></div>
</li><li>
<div class="bt">
<a href="">提交个人职称信息及简历</a>
</div>
<span class="date">2018-03-01</span>
<div class="clearfix"></div>
</li><li>
<div class="bt">
<a href="" >提交个人职称信息及简历</a>
</div>
<span class="date">2018-03-01</span>
<div class="clearfix"></div>
</li><li>
<div class="bt">
<a href="">提交个人职称信息及简历</a>
</div>
<span class="date">2018-03-01</span>
<div class="clearfix"></div>
</li>
</ul>
<ul class="c_1">
<li>
<div class="bt">
<a href="" id='blue'>老婆的生日到了要买礼物</a>
</div>
<span class="date">2018-03-04</span>
<div class="clearfix"></div>
</li>
<li>
<div class="bt">
<a href="">老婆的生日到了要买礼物</a>
</div>
<span class="date">2018-03-04</span>
<div class="clearfix"></div>
</li><li>
<div class="bt">
<a href="">老婆的生日到了要买礼物</a>
</div>
<span class="date">2018-03-04</span>
<div class="clearfix"></div>
</li><li>
<div class="bt">
<a href="">老婆的生日到了要买礼物</a>
</div>
<span class="date">2018-03-04</span>
<div class="clearfix"></div>
</li><li>
<div class="bt">
<a href="">老婆的生日到了要买礼物</a>
</div>
<span class="date">2018-03-04</span>
<div class="clearfix"></div>
</li><li>
<div class="bt">
<a href="">老婆的生日到了要买礼物</a>
</div>
<span class="date">2018-03-04</span>
<div class="clearfix"></div>
</li>
</ul>
</div>
</div>
</div>
</body>
<script>
$("c_1").hide().eq(0).show();
$(" h2 a").eq(0).addClass("b");
$(" h2 a").mouseenter(function(){
var showC = $(this).parent("h2").index();
$(" .c_1").hide().eq(showC).show();
$(" h2 a").removeClass("b");
$(this).addClass("b");
});
$("li:odd").css("background-color","#ffe");
$("#red").css("color","#f00");
$("#green").css("color","#0f0");
$("#blue").css("color","#00f");
$("li").children(".date").css("font-style","italic");
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
