js进阶 10-5 jquery中的层级选择器有哪些

时间 2020-05-22

标签进阶 jquery 层级选择器哪些栏目 JavaScript 繁體版

原文原文链接

js进阶 10-5 jquery中的层级选择器有哪些

1、总结

一句话总结：

一、jquery中的层级选择器有哪些？

四种，后代，子代，兄弟，相邻兄弟css

二、如何区别jquery中的层级选择器？

记住这四个符号：空格大于号波浪线加号html

2、js进阶 10-5 jquery中的层级选择器有哪些

一、相关知识点

层级选择器

层次选择器,就是能过元素之间的层次关系来获取元素.常见的层次关系包括:父子、后代、兄弟、相邻。jquery

$（"M N")后代选择器，选择M元素内部后代N元素
$（"M＞N")子代选择器,选择M元素内部子代N元素
$（"M~N")兄弟选择器,选择M元素后全部的同级N元素
$（"M+N")相邻选择器,选择M元素相邻的下一个元素

二、代码

 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 })