初學者指南：掌握 jQuery DOM 操作技巧

<div id="container">
    <p class="text">Hello, World!</p>
</div>

Document
 └─ <div id="container">
       └─ <p class="text">Hello, World!</p>

// 通過 ID 選取元素
$("#container")

// 通過類別選取元素
$(".text")

// 選取所有 <p> 元素
$("p")

// 選取特定屬性的元素
$("input[type='text']")

<p id="greeting">Hello, World!</p>
<button id="changeText">改變文字</button>

<script>
    // 獲取文本內容
    var text = $("#greeting").text();
    console.log(text); // 輸出 "Hello, World!"

    // 修改文本內容
    $("#changeText").click(function() {
        $("#greeting").text("Hello, jQuery!");
    });
</script>

<div id="content">這是一段<strong>加粗</strong>的文本。</div>
<button id="changeHtml">改變 HTML</button>

<script>
    $("#changeHtml").click(function() {
        $("#content").html('<p style="color:red;">新內容已更新！</p>');
    });
</script>

<input type="text" id="name" placeholder="輸入你的名字">
<button id="getName">顯示名字</button>

<script>
    $("#getName").click(function() {
        var name = $("#name").val(); // 獲取輸入框的值
        alert("你的名字是: " + name);
        
        $("#name").val("預設值"); // 設置新的值
    });
</script>

<img id="myImage" src="image1.jpg" alt="圖片描述">
<button id="changeAttr">更換圖片</button>

<script>
    // 獲取屬性值
    var src = $("#myImage").attr("src");
    console.log(src); // 輸出 "image1.jpg"

    // 設置新的屬性值
    $("#changeAttr").click(function() {
        $("#myImage").attr("src", "image2.jpg").attr("alt", "新圖片描述");
    });
</script>

<input type="text" id="myInput" disabled>
<button id="enableInput">啟用輸入框</button>

<script>
    $("#enableInput").click(function() {
        $("#myInput").removeAttr("disabled");
    });
</script>

<div id="box" style="width:100px; height:100px; background-color:blue;"></div>
<button id="changeColor">變更顏色</button>

<script>
    $("#changeColor").click(function() {
        $("#box").css({
            "background-color": "red",
            "border": "2px solid black"
        });
    });
</script>

<div id="message" class="info">這是一條訊息。</div>
<button id="changeClass">切換類別</button>

<script>
    $("#changeClass").click(function() {
        $("#message").toggleClass("highlight");
    });
</script>

<style>
    .highlight {
        color: white;
        background-color: green;
    }
</style>

$("#parent").append("<p>這是一個新增的段落。</p>"); // 新增到內部結尾
$("#parent").prepend("<p>這是一個新增的段落。</p>"); // 新增到內部開頭
$("#target").before("<p>這是目標元素之前的段落。</p>"); // 在元素之前新增
$("#target").after("<p>這是目標元素之後的段落。</p>"); // 在元素之後新增

$("#element").remove(); // 刪除整個元素 (含子元素)
$("#container").empty(); // 清空元素中的子元素

var copy = $("#element").clone();
$("#container").append(copy);