<!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>
jQuery的过滤与查找
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 初看旧约圣经，我被神带领的以色列百姓争战景象惊呆了，新约里那个处处充满怜悯充满慈爱的神怎能在旧约里带领百姓四处争战...
