【Day7】ChatGPT請教教我：網頁入門 - jQuery - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 7

自我挑戰組

用ChatGPT詠唱來完成工作與點亮前後端技能樹系列第 7 篇

【Day7】ChatGPT請教教我：網頁入門 - jQuery

15th鐵人賽 chatgpt jquery 前端 javascript

一宵三筵

2023-09-21 10:00:07

3440 瀏覽

分享至

jQuery是一個2006年推出的JS函式庫
三大框架盛行的至今，到了2023年還是有許多台灣的企業還在使用jQuery
以初學網頁的角度，我個人認同jQuery是相當好上手，很快就能開始撰寫網頁的函式庫

我個人剛開始也是進公司學寫jQuery，公司內部的專案都是用jQuery所撰寫
大概入職一年左右，期間遇到了億…些些jQuery的痛點
才說服主管轉戰react，然後花三年左右把公司內的專案逐一翻成react

即便遇到了些痛點，但jQuery還是有辦法把一個複雜的專案給支撐起來
以初學還在熟悉js的時候，jQuery還是一個入門的選擇的

( 當然我個人也覺得可以直接跳react或其他框架，但總之要看你入職的公司要你寫什麼 )
好的，前面前言這麼多，總之我們只是要來實驗看看ChatGPT到底能不能引領新手來學習jQuery

開始提問: 請提供有關jQuery的入門教學

好的，讓我們來開始學習 jQuery，這是一個相當實用的前端程式庫，可以幫助你更輕鬆地處理網頁互動。

首先，我會介紹一些基本的概念：
引入 jQuery：

在你的 HTML 文件中，你需要引入 jQuery 庫。你可以在網頁中的 <head> 區塊或者 <body> 區塊的最後引入它，像這樣：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
文件就緒函式：

jQuery 提供了一個文件就緒函式，確保你的程式碼在網頁完全載入後再執行。這是一個基本的範例：
$(document).ready(function(){
    // 你的程式碼在這裡
});
或者你可以簡化成：
$(function(){
    // 你的程式碼在這裡
});
現在，我們來看看一些基本的 jQuery 操作：
選擇元素：

使用 $ 符號來選擇元素，你可以使用類似 CSS 選擇器的語法：
$(document).ready(function(){
    // 選擇所有的 <p> 元素
    $("p")

    // 選擇 ID 為 myElement 的元素
    $("#myElement")

    // 選擇 class 為 myClass 的元素
    $(".myClass")
});
操作元素：

使用 jQuery 來改變元素的屬性或內容：
$(document).ready(function(){
    // 改變元素內容
    $("#myElement").text("新的內容");

    // 改變元素屬性
    $("#myElement").attr("href", "https://www.example.com");
});
事件處理：

jQuery 讓事件處理變得更容易：
$(document).ready(function(){
    // 點擊事件
    $("button").click(function(){
        alert("按鈕被點擊了！");
    });

    // 鼠標進入事件
    $("p").mouseenter(function(){
        alert("滑鼠進入了段落！");
    });
});
這是一個簡單的入門介紹，讓你開始使用 jQuery。希望這能對你有所幫助！如果你有任何問題或需要更進一步的幫助，請隨時告訴我。

這個教學跟上一篇的CSS一樣有個小毛病，那就是解說沒有搭配html提供範例
只好繼續用我們的公式：提供範例程式碼

來看看ChatGPT提供的教學能不能更友善一點

當然，我會提供一個簡單的 HTML 檔案，包含引入了 jQuery 的程式碼範例：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 入門範例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("按鈕被點擊了！");
            });
        });
    </script>
</head>
<body>
    <h1>歡迎使用 jQuery 入門範例</h1>
    <p>點擊下面的按鈕，觸發事件。</p>
    <button>點我</button>
</body>
</html>
這個範例包含了一個簡單的 HTML 結構，引入了 jQuery 庫。在文件就緒後，它會等待按鈕被點擊，一旦按鈕被點擊，就會將段落文字改為 "按鈕被點擊了！"。

你可以將這段程式碼複製到一個新的 HTML 檔案中，然後用瀏覽器打開它，以查看效果。如果你有任何疑問，請隨時告訴我。

好耶好耶，沒錯這個起碼有把js和html的內容做結合，也得到一個簡易能跑的範例
結果就會如下圖這樣

根據起始的教學+結合html的範例，開始可以寫一些動態網頁的部分了

根據上述我們學到了「選擇元素」、「操作元素」、「事件管理」
這三個關鍵字，且獲得了範例

假設，針對「選擇元素」仍然不太清楚，我們可以進行追問

好的，讓我針對 jQuery 中的「選擇元素」進行詳細解說。

在 jQuery 中，要選擇一個或多個 HTML 元素，你可以使用 $ 符號，然後接著一個 CSS 風格的選擇器。這允許你以非常簡潔、便利的方式來選取 DOM 元素。

以下是一些常見的選擇元素的方式：
以標籤名稱選擇元素：

你可以使用 HTML 標籤名稱來選擇相應的元素。
$("p") // 選擇所有的 <p> 元素
以 ID 選擇元素：

使用 # 符號來選擇具有特定 ID 的元素。
$("#myElement") // 選擇 ID 為 myElement 的元素
以 class 選擇元素：

使用 . 符號來選擇具有特定 class 的元素。
$(".myClass") // 選擇 class 為 myClass 的元素
以層級選擇元素：

你可以將這些方式組合在一起以進一步限定你的選擇。
$("div.container p.myClass") // 選擇 class 為 myClass 的 <p> 元素，但是它們必須是 div.container 元素的子元素
以屬性選擇元素：

你也可以選擇具有特定屬性的元素。
$("input[type='text']") // 選擇所有類型為 text 的 input 元素
這只是一個簡單的介紹，你可以根據需要使用更複雜的選擇器來定位你想要的元素。jQuery 的選擇器非常靈活，可以讓你以許多不同的方式來操作 DOM 元素。

希望這能幫助你理解如何在 jQuery 中選擇元素。如果你有任何進一步的問題，請隨時告訴我。

很棒的示範，但仍然缺少範例，我們再來要個範例

當然可以！以下是一個包含了 HTML 與 jQuery 選擇元素的範例：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 選擇元素範例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // 選擇所有的 <p> 元素並將它們的文字改為紅色
            $("p").css("color", "red");

            // 選擇 ID 為 myElement 的元素並將它的背景色改為藍色
            $("#myElement").css("background-color", "blue");

            // 選擇 class 為 myClass 的元素並隱藏它們
            $(".myClass").hide();
        });
    </script>
</head>
<body>
    <h1>jQuery 選擇元素範例</h1>
    <p>這是第一個段落</p>
    <p>這是第二個段落</p>
    <div id="myElement">
        這是一個帶有 ID 為 myElement 的 div 元素
    </div>
    <p class="myClass">這是一個帶有 class 為 myClass 的段落</p>
    <p class="myClass">這是另一個帶有 class 為 myClass 的段落</p>
</body>
</html>
這個範例包含了一個 HTML 頁面，引入了 jQuery 庫。在文件就緒後，它選擇了不同的元素，並對它們進行了一些操作：

所有 <p> 元素的文字顏色變為紅色。

ID 為 myElement 的元素的背景顏色變為藍色。

class 為 myClass 的元素被隱藏。

你可以將這段程式碼複製到一個新的 HTML 檔案中，然後用瀏覽器打開它，以查看效果。如果你有任何疑問，請隨時告訴我。

照著上面實際操作之後，得到以下結果

目前為止我們請ChatGPT提供的範例，裡面都沒有具體要求內容
即使如此，ChatGPT還是很良好的幫我們示範了常用的基本操作

例如.text() 、.attr()、.css() 、.hide()
針對事件也示範了 .click() 、 .mouseenter() 的定義

在實際學習的時候，再針對自己想要達成的功能，再去練習、提問會有更好的效果

請ChatGPT生成以jQuery撰寫的小程式

我們再複雜一點，用jQuery寫一個圈圈叉叉的遊戲好了
試試看能不能讓ChatGPT直接生成

當然可以！以下是使用 jQuery 撰寫的簡單 OOXX 遊戲範例：

HTML：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>OOXX 遊戲</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>歡迎來到OOXX遊戲</h1>
    <div class="board">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <button id="reset">重新開始</button>

    <script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)：

.board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-gap: 5px;
    margin-bottom: 10px;
}

.cell {
    width: 100px;
    height: 100px;
    background-color: #eee;
    font-size: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

button {
    font-size: 1.2em;
    padding: 10px 20px;
}

JavaScript (script.js)：

$(document).ready(function() {
    let currentPlayer = 'O';

    $('.cell').click(function() {
        if ($(this).text() === '') {
            $(this).text(currentPlayer);
            if (checkWin()) {
                alert(currentPlayer + ' 勝利！');
                resetBoard();
            } else if ($('.cell:empty').length === 0) {
                alert('平手！');
                resetBoard();
            } else {
                currentPlayer = (currentPlayer === 'O') ? 'X' : 'O';
            }
        }
    });

    function checkWin() {
        const lines = [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [2,4,6]];
        for (let line of lines) {
            if ($('.cell').eq(line[0]).text() === currentPlayer &&
                $('.cell').eq(line[1]).text() === currentPlayer &&
                $('.cell').eq(line[2]).text() === currentPlayer) {
                return true;
            }
        }
        return false;
    }

    function resetBoard() {
        $('.cell').text('');
        currentPlayer = 'O';
    }

    $('#reset').click(function() {
        resetBoard();
    });
});

這個範例使用了 HTML、CSS 和 jQuery 來實現一個簡單的 OOXX 遊戲。玩家可以點擊格子進行遊戲，遊戲會自動檢查是否有玩家獲勝或平手，並在適當的時候彈出提示框。遊戲還提供了重新開始的按鈕。

請確保將上述程式碼分別儲存為 index.html、styles.css 和 script.js，並放在同一個目錄下。以瀏覽器打開 index.html，即可開始遊戲。

結果他直接順利產給我們程式碼，也跟我們說要分別存成什麼檔名

我們的目的是學習! 所以請他給予詳細解釋

當然！以下是對上述程式碼的詳細解析：

HTML 檔案 (index.html):

<!DOCTYPE html>：指定了這是一個 HTML5 文件。

<html lang="zh-TW">：定義了文件的語言為繁體中文。

<head> 元素：包含了網頁的元信息，比如字符集和標題等。

<meta charset="UTF-8">：設置字符集為 UTF-8，以支援多種語言文字。

<title>：設置網頁的標題。

<link rel="stylesheet" href="styles.css">：連結了一個外部的 CSS 樣式表文件 styles.css。

<body> 元素：包含了網頁的主要內容。

<h1>：顯示網頁的主標題。

<div class="board">：一個包含格子的區域，用來顯示遊戲畫面。

<button id="reset">重新開始</button>：一個按鈕，用來重新開始遊戲。

<script> 元素：包含了 JavaScript 文件的連結和代碼。

src="<https://code.jquery.com/jquery-3.6.0.min.js>"：連結了 jQuery 函式庫，以便在文件中使用 jQuery 的功能。

src="script.js"：連結了一個包含 JavaScript 代碼的外部文件 script.js。

CSS 檔案 (styles.css):

這是一個 CSS 樣式表文件，用來設置網頁的外觀和風格。在這裡，它主要用於設置了遊戲版面的樣式，比如格子的大小、顏色等。

JavaScript 檔案 (script.js):

$(document).ready(function() {...});：這段程式碼使用 jQuery，它會在整個 HTML 文件完全載入完畢後執行。這確保了所有的 HTML 元素都已經存在，可以進行事件綁定等操作。

let currentPlayer = 'O';：宣告一個變數 currentPlayer，用來追蹤當前的玩家。一開始設置為 'O'。

$('.cell').click(function() {...});：這是一個事件處理器，它會在所有具有 .cell 類別的元素被點擊時觸發。

if ($(this).text() === '') {...}：檢查被點擊的格子是否為空，只有在格子是空的時候才能進行下一步的操作。

$(this).text(currentPlayer);：將當前玩家的符號（'O' 或 'X'）寫入被點擊的格子中。

if (checkWin()) {...}：檢查是否有玩家獲勝。

else if ($('.cell:empty').length === 0) {...}：如果所有格子都被填滿了（沒有空格了），則視為平手。

else {...}：在遊戲未結束的情況下，交換玩家。

function checkWin() {...}：這是一個檢查是否有玩家獲勝的函數。

const lines = ...：定義了可能會造成獲勝的情形，包括所有的行、列和對角線。

for (let line of lines) {...}：遍歷所有可能的獲勝情形。

if ($('.cell').eq(line[0]).text() === currentPlayer && ...)：檢查是否存在符合獲勝情形的三個格子。

function resetBoard() {...}：重新設置遊戲版面，將所有格子清空並重置當前玩家為 'O'。

$('#reset').click(function() {...});：當重新開始按鈕被點擊時，執行 resetBoard 函數。

這就是這個簡單 OOXX 遊戲的程式碼解析。希望這能幫助你理解這個程式的運作原理！如果你對任何部分有疑問，請隨時問我。