js进阶 10-5 jquery中的层级选择器有哪些
一、总结
一句话总结：
1、jquery中的层级选择器有哪些？
四种，后代，子代，兄弟，相邻兄弟
2、如何区别jquery中的层级选择器？
记住这四个符号：空格 大于号 波浪线 加号
二、js进阶 10-5 jquery中的层级选择器有哪些
1、相关知识点
层级选择器
层次选择器,就是能过元素之间的层次关系来获取元素.常见的层次关系包括:父子、后代、兄弟、相邻。
- $（"M N")后代选择器，选择M元素内部后代N元素
- $（"M＞N")子代选择器,选择M元素内部子代N元素
- $（"M~N")兄弟选择器,选择M元素后所有的同级N元素
- $（"M+N")相邻选择器,选择M元素相邻的下一个元素
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文档</title> 6 <script src="jquery-3.1.1.min.js"></script> 7 <script src="ktys5.js"></script> 8 <style type="text/css"> 9 /* *{ 10 font-size: 18px; 11 color: red 12 }*/ 13 /*div p{color: red}*/ 14 /* div>p{color: green}*/ 15 /* #li2~li{color: blue}*/ 16 /*#li2+li{color: blue}*/ 17 </style> 18 </head> 19 <body> 20 <div> 21 <h4>属性选择器</h4> 22 <p>HTML元素通常包含很多属性,jQuery的属性选择器就是把各种属性作为选择器。</p> 23 <ul> 24 <li>$("selector[attr]") 选择包含给定属性的元素</li> 25 <li>$("selector[attr='value']") 选择给定的属性是某个特定值的元素</li> 26 <li>$("selector[attr != 'value']") 选择所有含有指定的属性，但属性不等于特定值的元素</li> 27 <li>$("selector[attr *= 'value']") 选择给定的属性是以包含某些值的元素</li> 28 <li>$("selector[attr ^= 'value']") 选择给定的属性是以某些值开始的元素（比较少用）</li> 29 <li>$("selector[attr $= 'value']") 选择给定的属性是以某些值结尾的元素（比较少用）</li> 30 <li></li> 31 <li></li> 32 </ul> 33 </div> 34 </body> 35 </html>
1 $(function(){ 2 $('*').css('font-size','12px') 3 // $('div p').css('color','red') 4 // $('div>p').css('color','red') 5 // $('#li2~li').css('color','red') 6 $('#li2+li').css('color','red') 7 })