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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。