<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤操作</title>
<style>
.my-list{
width: 600px;
list-style: none;
}
.my-list li{
margin-bottom: 10px;
padding: 20px;
border: 20px dashed orange;
}
</style>
</head>
<body>
<h1>jQuery</h1>
<hr>
<ul class="my-list">
<li>张奶奶</li>
<li>李奶奶</li>
<li class="item">刘奶奶</li>
<li>马奶奶 <span class="item">item span</span></li>
<li>牛奶奶</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$('.my-list li').first().css('color','yellow');
$('.my-list li').last().css('color','red');
$('.my-list li').eq(1).css('color','blue');
$('.my-list li').not('.item').css('border','3px solid red');
// filter() 选中这个元素
$('.my-list li').filter('.item').css('color','green');
// 从2截取 一直到最后
$('.my-list li').slice(2).css('color','purple');
// 截取1和3 内的 不包括1 和 3
$('.my-list li').slice(1,3).css('color','purple');
//has 子元素有item的 li 才符合条件
$('.my-list li').has('.item').css("border", "5px solid purple");
})
// 包含有子元素的div的li
// $('li').has('div').css('color','red');
// 符合条件的才行 e而且 filter必须作用在li上
// $('li').filter('.dd').css('color','red');
//filter()方法与has()方法中的参数，都是过滤条件。不同的是filter()方法，条件作用于自身；has()方法条件是作用于它的后代元素中。
$('li').find('span').css('color','red');
//find（）：在当前选中元素的上下文中寻找符合条件的后代，返回的是子元素
</script>
</body>
</html>
网友评论