參考原始文章：https://www.cnblogs.com/weixiao520/p/5661912.html
一、獲取父級元素
1、 parent([expr]):
獲取指定元素的所有父級元素
代碼如下:
$("li.third-item").parent().css('background-color', 'aqua');
2、parents()
獲得當前匹配元素集合中每個元素的祖先元素，應用選擇器進行篩選是可選的。
-
- $('li.item-a').parents().css('background-color', 'red');
調用的結果是，level-2 列表、項目 II 以及 level-1 列表等元素（沿 DOM 樹一路向上直到 <html>）設置紅色背景。
3、.closest(selector)
closest() 方法獲得匹配選擇器的第一個祖先元素，從當前元素開始沿 DOM 樹向上。
二、獲取同級元素
1、.next(selector)
獲得匹配元素緊鄰的下一個同級元素。
2、.nextAll(selector)
獲得匹配元素后面的所有同級元素。
3、.prev(selector)
獲得匹配元素緊鄰的前一個同級元素（與next相反）
4、.prevAll(selector)
獲得當前匹配元素前面的所有同級元素（與nextAll相反）
5、andSelf():
獲取指定元素后邊的所有同級元素，之后加上指定的元素。
三、獲取子元素
1、.children(selector)
返回匹配元素的子元素。
2、.find(selector)
獲得當前元素的后代
3，查找子元素：>
例如 ul下所有的li元素 var nods = $("ul > li");
用法如下：
<script type="text/javascript"> $(document).ready(function () { //獲取指定元素的所有父級元素 //$("li.third-item").parent().css('background-color', 'aqua'); //獲取指定元素的上一個同級元素 //$("li.third-item").prev().css('background-color', 'red');// list item 2變紅色 //獲取指定元素的前邊所有的同級元素 //$("li.third-item").prevAll().css('background-color', 'red');// list item 3以前的都變為紅色 //獲取指定元素的下一個同級元素 // $("li.third-item").next().css('background-color', 'red');// list item 4變紅色 //獲取指定元素后邊的所有同級元素 //$("li.third-item").nextAll().css('background-color', 'red');//list item 4以后的都變為紅色 //獲取指定元素后邊的所有子元素 //$('ul.level-2').children().css('border', '1px solid green');//level-2下class為item-a，item-b和item-c都加上顏色為green的邊框，不包括item-b下class為level-3的元素 //獲取指定元素后邊的所有指定的子元素 $('ul.level-2').find('li').css('border', '1px solid green');//level-2下的li都加上顏色為green的邊框 //獲取指定元素后邊的所有同級元素，之后加上指定的元素 var p_nex = $("p").nextAll().andSelf(); p_nex.addClass('p-css');//選擇p標簽后面的所有同級標簽，以及自己class都加上p-css //子元素 var nods = $("ul.level-1 > li"); alert(nods.length);//3個 }); </script>