JQuery_过滤器

最新推荐文章于 2022-07-17 20:55:35 发布

飞腾创客

最新推荐文章于 2022-07-17 20:55:35 发布

阅读量303

点赞数 1

分类专栏： javascript基础

本文链接：https://blog.csdn.net/qq_39716220/article/details/77855961

版权

javascript基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
display: inline-block;
width: 50px;
height: 30px;
background-color: gray;
border: 1px solid red;
}
ul{
list-style: none;
}
ul li{
width: 80px;
height: 30px;
background-color: green;
border: 1px solid black;
text-align: center;
float: left;
}
.head{
width: 600px;
height: 50px;
}
.btn{
width: 900px;
height: 50px;
margin-left: -40px;
}
</style>
</head>
<body>
<div>
<div class="head">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="not_span"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="btn">
<ul>
<li class="first_li">:first</li>
<li class="last_li">:last</li>
<li class="even_li">:even</li>
<li class="odd_li">:odd</li>
<li class="gt_li">:gt()</li>
<li class="not_li">:not()</li>
<li class="lt_li">:lt</li>
<li class="next_li">.next()</li>
<li class="prev_li">.prev()</li>
<li class="siblings_li">.siblings()</li>
</ul>
</div>
</div>

</body>
<script src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
//点击事件
//选择第一个
$('.first_li').on('click',function(){
$('span:first').css({'backgroundColor':'red'});
});
//选择最后一个
$('.last_li').on('click',function(){
$('span:last').css({'backgroundColor':'pink'});
});
//选择偶数项
$('.even_li').on('click',function(){
$('span:even').css({'backgroundColor':'green'});
});
//选择奇数项
$('.odd_li').on('click',function(){
$('span:odd').css({'backgroundColor':'yellow'});
});
//选择大于指定索引的
$('.gt_li').on('click',function(){
$('span:gt('+$(this).index()+')').css({'backgroundColor':'blue'});
});
//选择不包含
$('.not_li').on('click',function(){
$('span:not(.not_span)').css({'backgroundColor':'white'});
});
//小于指定索引
$('.lt_li').on('click',function(){
$('span:lt('+$(this).index()+')').css({'backgroundColor':'red'});
});
//下一个同级元素
$('.next_li').on('click',function(){
$('span').eq($(this).index()).next().css({'backgroundColor':'orange'});
});
//前一个同级元素
$('.prev_li').on('click',function(){
$('span').eq($(this).index()).prev().css({'backgroundColor':'orange'});
});
//选择后面其他所有同级元素
$('.siblings_li').on('click',function(){
$('span').eq(5).siblings().css({'backgroundColor':'green'});
});
</script>
</html>