jquery的查詢篩選器
阿新 • • 發佈：2021-07-21
尋找元素(篩選器)
過濾篩選器
$("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</liwhile True: print('studying...')> <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>