20240930 | Notion

JQuery 的常見使用方式可以概括為九種，這些方式涵蓋了大部分的前端操作需求。以下是簡單的說明：

使用方式	說明
1. 選擇器	使用類似 CSS 的選擇器來選擇 DOM 元素，如 `$("#id")`、`$(".class")`。
2. 操作 DOM	增加、刪除、修改 DOM 元素，如 `append()`、`remove()`、`html()`。
3. 事件處理	綁定事件，如 `click()`、`hover()`，並處理用戶的互動。
4. AJAX 操作	發送 HTTP 請求，無需刷新頁面即可獲取數據，如 `$.ajax()`。
5. 屬性操作	讀取或修改元素屬性，如 `attr()`、`prop()`、`val()`。
6. 樣式操作	動態修改元素樣式，如 `css()`、`addClass()`、`removeClass()`。
7. 動畫效果	提供簡單的動畫效果，如 `fadeIn()`、`slideUp()`、`animate()`。
8. 遍歷與過濾	遍歷 DOM 樹或過濾選擇的元素，如 `each()`、`filter()`、`find()`。
9. 插件擴展	開發或使用 JQuery 插件來擴展功能。

這九種方式涵蓋了 JQuery 的大部分常見操作，讓開發者能輕鬆應對各種前端需求。

下面是根據註解補完的教學內容，並且詳細解釋 $ 符號與 jQuery() 的作用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery Basics</title>
    <script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>
</head>
<body>
    <div id="content">這是一個內容區域。</div>
    <button id="btn">點我改變內容</button>

    <script>
        // 10. 一個字串或者數值的變數
        let message = "Hello, JQuery!";  // 宣告一個字串變數 message

        // 20. 一個function
        function updateContent() {
            alert("內容即將更新！"); // 彈出提示框
            $("#content").text(message); // 使用 JQuery 選擇器更新內容
        }

        // 30. jQuery
        // jQuery 是一個 JavaScript 函式庫，讓你可以更簡單地操作 HTML 文件、處理事件、製作動畫等。
        // jQuery 使用 jQuery() 函數來進行操作，這個函數有時可以使用 $ 作為縮寫。

        // 40. $ 符號
        // $ 符號是 jQuery 的縮寫，它其實就是 jQuery() 函數的快捷方式。這讓操作更加簡潔。
        // 可以寫成：$(選擇器)。當你用 $ 時，它實際上調用了 jQuery() 函數。

        // 當點擊按鈕時，執行 updateContent 函數
        $("#btn").click(function() {
            updateContent(); // 使用按鈕點擊事件來更新內容
        });
    </script>
</body>
</html>

詳細解釋：

$ 和 jQuery() 的說明：
- $ 是 jQuery() 的縮寫，兩者功能相同。它們都可以用來選擇元素並進行操作，如 $("#content")。
- 在這個範例中，$("#content") 使用了 jQuery 的選擇器來選取 ID 為 content 的 <div> 元素，然後使用 .text() 方法更新其內部文字。
其他筆記說明：
- 10. 一個字串或者數值的變數：定義了一個字串變數 message，其值為 "Hello, JQuery!"。
- 20. 一個 function：定義了 updateContent() 函數，該函數會彈出提示框並更新頁面內容。
- 30. jQuery：jQuery 是 JavaScript 的一個函式庫，讓前端操作變得簡單高效。主要使用 jQuery() 函數來操作 DOM，但常用 $ 來簡化書寫。
- 40. $ 符號：$ 是 jQuery() 的簡寫形式，讓程式碼更加簡潔。

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

<head>
    <meta charset="UTF-8">
    <script src="../_js/jquery-3.7.1.js"></script>
</head>

<body>

    <h4>jQuery()</h4>
    <p><a href="<https://api.jquery.com/jQuery/>"><https://api.jquery.com/jQuery/></a></p>
    <h4>jQuery Selectors</h4>
    <p><a href="<https://www.w3schools.com/jquery/jquery_ref_selectors.asp>"><https://www.w3schools.com/jquery/jquery_ref_selectors.asp></a></p>

    <hr>

    <h4>CSS 選擇器</h4>
    <ol id="myList">
        <li>標籤(tag name)</li>
        <li>屬性(#id)</li>
        <li>類別(.class)</li>
        <li>其他</li>
    </ol>

    <h4>jQuery函式庫可以做什麼？</h4>
    <ol>
        <li>取得元素</li>
        <li>增減元素</li>
        <li>尋找元素</li>
        <li>其他</li>
    </ol>

    <script>
        // 10. 挑選 h4 標籤

        

        // 20. 透過 #myList 選擇 ul 標籤

        // 30. 挑選 li 標籤

        // 40. 挑選第一個出現的 li 

        // 50. 挑選各別元素中第一個出現的 li

        // 60. jQuery 函式庫是否有針對 <input> 提供特殊的選擇方式？
    </script>

</body>

</html>

在 jQuery 中，CSS 選擇器是用來選擇和操作 DOM 元素的核心部分。jQuery 完全支持大部分的 CSS 選擇器，這意味著你可以使用 CSS 中的選擇器語法來操作 HTML 元素，像是 ID、類別、標籤等。