jQuery的篩選操作2
阿新 • • 發佈：2018-12-11
jQuery 的篩選常用函式：
not, 排除指定的元素
slice， 選取指定元素的一個子集
find，選擇一個元素，和空格操作相同，例如 $("p span")相同。
next, nextAll, nextUntil， 查詢相鄰的同輩元素（unitl的操作，不包含最終的那個元素）
parent, parents, parentsUntil 查詢當前元素的祖先元素
prev, prevAll, prevUntil 查詢當前元素的前一個同輩元素
contents， 選取當前元素的子元素
end 回到最近 的一個破壞性操作之前，即，將匹配的元素列表變為前一次的狀態
andSelf 加入先前選取的元素到當前元素中
sublings （兄弟意思）選取當前的元素的一個同輩元素的子集
<!DOCTYPE html> <html lang="en"> <head> <script src="jquery-1.11.1.min.js"></script> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>========jQuery 的篩選操作2=========</p> <p>Hello111</p> <p id="selected">Hello Again</p> <p>Hello222</p> <p>Hello</p> <p>cruel</p> <p>World</p> <p>Hello</p> <div class="outer_div"> <span>Hello Again11</span> <span class="selected">Hello Again22</span> <span>Hello Again33</span> <div>inner div</div> </div> <p>And Again <p><span>Hello</span>, how are you?</p> <p class="nextp">Hello</p> <p class="selected">Hello Again next p</p> <div class="selected">this is div,<span class="testparent">And Again</span></div> <div class="selected2"><span>And Again2222</span></div> <dl> <dt>term 1</dt> <dd>definition 1-a</dd> <dd>definition 1-b</dd> <dd>definition 1-c</dd> <dd>definition 1-d</dd> <dt id="term-2">term 2</dt> <dd>definition 2-a</dd> <dd>definition 2-b</dd> <dd>definition 2-c</dd> <dt>term 3</dt> <dd>definition 3-a</dd> <dd>definition 3-b</dd> </dl> <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul> <p>Hello</p> <div>this is div,<span>Hello Again</span></div> <p class="test_prev">And Again test_prev</p> <p>And Again test_prev after</p> <dl> <dt>term 1</dt> <dd>definition 1-a</dd> <dd>definition 1-b</dd> <dd>definition 1-c</dd> <dd>definition 1-d</dd> <dt id="term2">term 2</dt> <dd>definition 2-a</dd> <dd>definition 2-b</dd> <dd>definition 2-c</dd> <dt>term 3</dt> <dd>definition 3-a</dd> <dd>definition 3-b</dd> </dl> <p class="test_end"><span>Hello</span>,how are you?</p> <p class="test_content">Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p> <div class="test_div">this is div <p>First Paragraph</p> <p>Second Paragraph</p> </div> <div class="test_subling"><span>Hello</span></div> <p class="selected2">Hello Again22222</p> <p>And Again</p> </body> </html> <script> $(function () { //not(expr|ele|fn) 排除元素 // $("p").not($("#selected")).css("color", "red") //slice 選取元素的一個子集 //$("p").slice(0, 1).wrapInner("<b></b>"); //children 選取元素的子元素 // $("div.outer_div").children().css("color", "red"); //$("div").children(".selected").css("color", "red"); //find 從所有的段落開始，進一步搜尋下面的span元素。與$("p span")相同。 //$("p").find("span").css("color", "red"); //$("p span").css("color", "red"); //next找到每個段落的後面緊鄰的同輩元素。 // $("p.nextp").next().css("color", "red"); //$("p.nextp").next(".selected").css("color", "red"); //nextAll 查詢當前元素之後所有的同輩元素。 //$("p.nextp").nextAll(".selected").css("color", "red"); //nextUntil 直到出現某個元素之前，選取一個範圍 //$('#term-2').nextUntil('dt').css('color', 'red'); //parents 祖先元素 // $("span.testparent").parents().css("color","red");//直接找到了body,然後設定了style="color:red" //parent 直接祖先 // $("span.testparent").parent().css("color","red"); //parentsUntil 查詢當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。(不包括那個元素) //$('li.item-a').parentsUntil('.level-1').css('background-color', 'red'); //prev前一個同輩元素。 // $("p.test_prev").prev().css("color", "red"); //prevAll查詢當前元素之前所有的同輩元素 //$("p.test_prev").prevAll().css("color", "red"); //查詢當前元素之前所有的同輩元素，直到遇到匹配的那個元素為止。(不包括那個同輩的元素) // $('#term2').prevUntil('dt').css('background-color', 'red'); //end 回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變為前一次的狀態。 /** * 選取所有的p元素，查詢並選取span子元素，然後再回過來選取p元素 */ // $("p.test_end").find("span").css("color","yellow").end().css("background-color", "red"); //content 這個例子是選擇類test_content的元素p的子元素 //$("p.test_content").contents().css("color", "red"); //andSelf加入先前所選的加入當前元素中 //$("div.test_div").find("p").css("color", "yellow").andSelf().css("background-color", "red"); //siblings (兄弟意思)取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表示式進行篩選。 //$("div.test_subling").siblings(".selected2").css("background-color", "red"); }); </script>