寻找元素(筛选器)
过滤筛选器
$("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>