① $(this).next()； 獲取的是當前元素的下一個兄弟元素 ②$(this).nextAll(); 獲取的是當前元素的後面的所有的兄弟元素 ③$(this).prev(); 獲取的是當前元素的前一個兄弟元素 ④$(this).prevAll(); 獲取的是當前元素的前面的所有的兄弟元素 ⑤ ...
① $(this).next()； 獲取的是當前元素的下一個兄弟元素
②$(this).nextAll(); 獲取的是當前元素的後面的所有的兄弟元素
③$(this).prev(); 獲取的是當前元素的前一個兄弟元素
④$(this).prevAll(); 獲取的是當前元素的前面的所有的兄弟元素
⑤$(this).siblings(); 獲取的是當前元素的所有的兄弟元素(自己除外)
案例練習：
需求分析：滑鼠進入文字，當前文字背景變紅色，當點擊時候，當前文字前面文字背景顏色變為黃色，後面文字背景顏色變為藍色，當滑鼠移出時，所有背景顏色取消
效果：
代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 ul { 8 list-style-type: none; 9 width: 200px; 10 margin: 100px auto; 11 } 12 13 ul li { 14 margin-top: 10px; 15 cursor: pointer; 16 text-align: center; 17 font-size: 20px; 18 } 19 </style> 20 <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script> 21 <script> 22 //獲取ul中所有的li,有滑鼠進入事件,滑鼠離開事件,點擊事件 23 // $(function () { 24 // //獲取ul->li 25 // $("ul>li").mouseenter(function () { 26 // $(this).css("backgroundColor","red").siblings().css("backgroundColor",""); 27 // }).mouseleave(function () { 28 // $(this).css("backgroundColor","").siblings().css("backgroundColor",""); 29 // }).click(function () { 30 // //當前元素前面的所有兄弟元素背景顏色為黃色 31 // //$(this).prevAll().css("backgroundColor","yellow"); 32 // //當前元素後面的所有兄弟元素背景顏色為藍色 33 // //$(this).nextAll().css("backgroundColor","blue"); 34 // 35 // //鏈式編程代碼 36 // //斷鏈:對象調用方法,返回的不是當前的對象,再調用方法,調用不了, 37 // //解決斷鏈--->恢復到斷鏈之前的一個效果--修複斷鏈 38 // //.end()方法恢復到斷鏈之前的效果 39 // $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue"); 40 // }); 41 // }); 42 43 $(function(){ 44 //鏈式編程 滑鼠進入--滑鼠點擊--滑鼠移出 45 //$("ul>li").mouseover().click().mouseout(); 46 $("ul>li").mouseover(function(){ 47 $(this).css("backgroundColor","red").siblings("li").css("backgroundColor",""); 48 }).click(function(){ 49 $(this).prevAll().css("backgroundColor","yellow"); 50 $(this).nextAll().css("backgroundColor","blue"); 51 }).mouseout(function(){ 52 $("ul>li").css("backgroundColor",""); 53 }); 54 }); 55 </script> 56 </head> 57 <body> 58 <ul> 59 <li>青島啤酒（TsingTao）</li> 60 <li>瓦倫丁（Wurenbacher）</li> 61 <li>雪花（SNOW）</li> 62 <li>奧丁格教士（Franziskaner）</li> 63 <li>科羅娜喜力柏龍（Paulaner）</li> 64 <li>嘉士伯Kaiserdom</li> 65 <li>羅斯福（Rochefort）</li> 66 <li>粉象（Delirium）</li> 67 <li>愛士堡（Eichbaum）</li> 68 <li>哈爾濱牌藍帶</li> 69 </ul> 70 71 </body> 72 </html>
註意： 上述代碼第49、50行可以壓縮成一行，這樣就引入了一個新的方法
end()；作用是恢復短鏈。
原來兩行代碼：
$(this).prevAll().css("backgroundColor","yellow");
$(this).nextAll().css("backgroundColor","blue");
修改後代碼：
$(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
