微信扫一扫打赏支持

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

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

 

posted @ 2018-06-13 11:15  范仁义  阅读(1186)  评论(0)  编辑  收藏  举报