20241004 | Notion

addClass/RemoveClass

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/30_cssstyle.css">
    <script src="../_js/jquery-3.7.1.js"></script>
</head>

<body>

    <section>
        <button id="btn1">div,p</button>
        <button id="btn2">div>p</button>
        <button id="btn3">div+p</button>
        <button id="btn4">div~p</button>
        <button id="btn5">div p</button>

        <p>p-0</p>
        <div>
            div-1
            <div>
                div-2
                <p>p-1</p>
                <div>
                    div-3
                    <p>p-2</p>
                </div>
                <section>
                    section-1
                    <p>p-3</p>
                </section>
            </div>
            <p>p-4</p>
            <p>p-5</p>
        </div>
    </section>

    <script>
        // 試試看 addClass、removeClass，以及各種選擇器
      
       
        // 10. div,p
        btn1.onclick = function() {
            $('div,p').removeClass('bgColor');
            $('div,p').addClass('bgColor');
        }
        //(div,p)中的,代表選擇器選取兩個元素，並且同時套用動作
        // 20. div>p
        btn2.onclick = function() {
            $('div,p').removeClass('bgColor');
            $('div>p').addClass('bgColor');
        }
        //(div>p)中的>代表選擇器只選取div元素的子元素p，並且同時套用動作
        // 30. div+p
        btn3.onclick = function() {
            $('div,p').removeClass('bgColor');
            $('div+p').addClass('bgColor');
        }
        //(div+p)中的+代表選擇器選取div元素的下一個元素p，並且同時套用動作
        // 40. div~p
        btn4.onclick = function() {
            $('div,p').removeClass('bgColor');
            $('div~p').addClass('bgColor');
        }
        //(div~p)中的~代表選擇器選取div元素的前一個元素p，並且同時套用動作
        // 50. div p
        btn5.onclick = function() {
            $('div,p').removeClass('bgColor');
            $('div p').addClass('bgColor');
        }
        //(div p)中的空格代表選擇器選取div元素的子元素p，並且同時套用動作
    </script>

</body>

</html>

下面是對這些選擇器的簡單總結，依照你的要求將 ,、>、+、~、空格逐一條列並說明它們的作用：

,（逗號）
- 功能：選取多個元素，對每個選擇的元素同時套用動作。
- 範例：div, p 選取所有 <div> 和 <p> 標籤。
>（大於號）
- 功能：選取某個元素的直接子元素，不包括更深層的後代元素。
- 範例：div > p 只選取直接位於 <div> 內的 <p> 標籤（子元素）。
+（加號）
- 功能：選取緊接在某個元素之後的兄弟元素。
- 範例：div + p 選取與 <div> 相鄰的第一個 <p> 元素。
~（波浪號）
- 功能：選取某個元素後的所有兄弟元素（不只限於相鄰一個，會選取所有後續的兄弟元素）。
- 範例：div ~ p 選取所有位於 <div> 後面的兄弟 <p> 元素。
空格
- 功能：選取某個元素的所有後代元素，無論其層級如何（包括子元素、孫元素等）。
- 範例：div p 選取位於 <div> 內的所有 <p> 元素，無論 <p> 處於第幾層。

這些選擇器能夠用來精準地控制 DOM 結構中的元素範圍，使你能夠靈活地對特定元素進行操作。

負數變數命名的，不是陣列就是物件(廢話)