寻找元素(筛选器)
过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
查找筛选器
'''
$("div").children(".test")找子代 $("div").find(".test")后代
$(".test").next()下一个 $(".test").nextAll()下面所有 $(".test").nextUntil()下面区间
$("div").prev()上一个 $("div").prevAll()上面所有 $("div").prevUntil()上面区间
$(".test").parent()找父代 $(".test").parents()找到body标签 $(".test").parentUntil()查找父节点区间标签
$("div").siblings()除自己以外的标签
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery筛选器</title>
</head>
<body>
<script src="jquery-3.3.1.js"></script>
<ul>
<li id="li1">11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li id="li6">66</li>
</ul>
<script>
// 过滤筛选器
$('li').eq(1).css('color','red'); // 第二个li标签
$('li').first().css('color','red'); // 第一个li标签
$('li').last().css('color','red'); // 最后一个li标签
</script>
<div class="outer">
div0
<div class="div1">
div1
<p class="p0">p0</p>
</div>
<div class="div2">
div2
<p class="p1">p1</p>
</div>
<p class="p2">p2</p>
</div>
<div class="div3">
div3
<p class="p3">p3</p>
</div>
<p class="p4">p4</p>
<div class="div4">div4</div>
<script>
// 查找筛选器
$('.outer').children('p').css('color','red'); // children查找的是class='p2'的p标签，找的是子代
$('.outer').find('p').css('color','blue'); // find查找的是class='p0',class='p1',class='p2'的p标签，找的是后代
$('li').eq(1).next().css('color','blue'); // next查找下一个，结果为第三个li标签
$('li').eq(1).nextAll().css('color','yellow'); // nextAll查找下面所有标签，结果为第三四五六li标签
$('li').eq(1).nextUntil('#li6').css('color','blue'); // nextUntil查找下面区间标签，结果为第三四五li标签
$('li').eq(4).prev().css('color','black'); // prev查找上一个，结果为第四个li标签
$('li').eq(4).prevAll().css('color','yellow'); // prevAll查找上面所有标签，结果为第一二三四li标签
$('li').eq(4).prevUntil('li:eq(0)').css('color','red'); // prevUntil查找上面区间标签，结果为第二三四li标签
console.log($('.outer .div2 .p1').parent().html()); // div2 <p class="p1" style="color: blue;">p1</p>；parent寻找父亲节点
$('.outer .div2 .p1').parents().css('color','green'); // parents会一直往上找，直到body标签为止(有些不变绿，跟权重有关系还是什么？)
$('.outer .div2 .p1').parentsUntil('body').css('color','pink'); // parentsUntil查找父节点区间标签，不包含body
$('.div3').siblings().css('color','orange'); // siblings查找到的是除自己以外上下所有的标签
</script>
</body>
</html>