jQuery層級選擇器
阿新 • • 發佈：2022-04-17
層次選擇器
後代選擇器
格式： 父元素 指定元素（以空格隔開）
示例：$("父元素 指定元素")
選擇父元素的所有指定元素（包含第一代、第二代等）
子代選擇器
格式： 父元素>指定元素（以大於號隔開）
示例：$("父元素>指定元素")
選擇父元素的所有第一代指定元素
相鄰選擇器
格式： 父元素+指定元素（以加號隔開）
示例：$("父元素+指定元素")
選擇元素的下一個指定元素（只會查詢下一個元素，如果元素不存在，則獲取不到）
同輩選擇器
格式： 父元素~指定元素（以波浪線隔開）
示例：$("父元素~指定元素")
選擇元素下面的所有指定元素
程式碼示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .testColor { background: green; } .gray { background: gray;} </style> </head> <body> <div id="parent">層次選擇器 <div id="child" class="testColor">父選擇器 <div class="gray">子選擇器</div> <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129"> <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129"> </div> <div> 選擇器2<div>選擇器2中的div</div> </div> </div> </body> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //後代選擇器 var hd = $('#parent div'); console.log(hd); //子代選擇器 var zd = $('#parent > div'); console.log(zd); //相鄰選擇器 var xl = $('#child + div') console.log(xl); //同輩選擇器 var imgs = $('.gray ~ img') console.log(imgs); </script> </html>