<div id="hd"> <p>后盾人 人人做后盾0</p> <p id="one">后盾人 人人做后盾1</p> <p>后盾人 人人做后盾2</p> <p>后盾人 人人做后盾3</p> <p>后盾人 人人做后盾4</p> <span>66666</span> <p>后盾人 人人做后盾5 <span>6666</span></p> <p>后盾人 人人做后盾6</p> <p>后盾人 人人做后盾7 <span>6666</span></p> <div id=""> <p>我們也是p標簽8</p> <p>我們也是p標簽9</p> <p>我們也是p標簽10</p> </div> </div> 選擇第一個 （0） $("#hd p").first().css({'color':'blue','font-size':'25px'}); 選擇最后一個 （10） $("#hd p").last().css({'color':'blue','font-size':'25px'}); 選擇第二個 （2） $("#hd p").eq(2).css({'color':'blue','font-size':'25px'}); 排除id=one的p標簽（0，2，3，4，5，6，7，8，9，10） $("#hd p").not('#one').css({'color':'blue','font-size':'25px'}); 獲取p標簽中包含span標簽的元素 （5，7） $("#hd p").has('span').css({'color':'blue','font-size':'25px'}); 選擇p標簽總的2，3，4元素 $("#hd p").slice(2,5).css({'color':'blue','font-size':'25px'}); 選擇的是#hd里面的span標簽 （兩個6666） $("#hd p").find('span').css({'color':'blue','font-size':'25px'}); 選擇的是緊鄰在#one后面的那一個p標簽 （2） $("#one").next('p').css({'color':'blue','font-size':'25px'}); 選擇的是#one后面所有同級的p標簽 （2，3，4，5，6，7） $("#one").nextAll('p').css({'color':'blue','font-size':'25px'}); 選擇的是緊鄰在#one前面的那一個p標簽 （0） $("#one").prev('p').css({'color':'blue','font-size':'25px'}); 選擇的是#one前面所有同級的p標簽 （0） $("#one").prevAll('p').css({'color':'blue','font-size':'25px'}); 選擇的是#one的父級元素 （0-10） $("#one").parent().css({'color':'blue','font-size':'25px'}); eg: <style type="text/css"> #a{ width: 600px; height: 500px; margin: 0 auto; border: 1px solid black; } .b{ width: 500px; height: 400px; margin: 30px; border: 1px solid blue; } .c{ width: 400px; height: 300px; border: 2px solid orangered; margin: 40px; } .d{ width: 300px; height: 200px; background: forestgreen; margin: 30px; } </style> <div id="a"> <div class="b"> <div class="c"> <div class="d"></div> </div> </div> </div> 選擇所有的父級元素,并且篩選出class是b的 $(".d").parents('.b').css('background','pink'); 選擇的是#one標簽名是p的兄弟元素 $("#one").siblings('p').css({'color':'blue','font-size':'25px'}); 并集選擇 $("p").add('span').css({'color':'blue','font-size':'25px'});