網頁的階層觀念

在網頁開發中，了解網頁元素的階層結構非常重要。以下是一些常見的 jQuery 函式，用於操作不同階層的元素：

1. this：只操控到有被選中的元素。
2. parent()：找到自己的父階層元素。
3. siblings()：選擇除了自己的其他同層元素。
4. find()：找到自己的子元素。

HTML:

  <div class="parent">
    <div class="child">子元素 1</div>
    <div class="child">子元素 2</div>
  </div>

jQuery:

    $(document).ready(function() {
      // 使用 jQuery 函式選擇元素
      var $parent = $(".parent");
      var $children = $parent.find(".child");

      // 操作不同層次的元素
      $children.eq(0).css("background-color", "lightblue");
      $children.eq(1).css("background-color", "lightgreen");
    });

取消預設的行為 - 使用 preventDefault()

在網頁開發中，我們經常需要取消某些元素的預設行為，例如取消 <a>標籤的點擊跳轉。
HTML:

<a href="#">連結</a>
<div class="text">點擊連結後展開這段文字</div>

jQuery:

$(document).ready(function() {
  $('a').click(function(event) {
    event.preventDefault(); // 取消點擊的預設行為
    $('.text').slideUp();
  });
});

動態載入 CSS 設定 - 使用 css()

使用 jQuery，你可以動態更改網頁元素的 CSS 屬性。以下是一個範例，將文字區塊的寬度設定為 200 像素：
HTML:

<div class="text">文字區塊</div>

jQuery:

$(document).ready(function() {
    $('.text').css('width', '200px');
});

即時放大縮小字 - 使用 animate()

CSS:

    #text {
      font-size: 24px;
    }

HTML:
<div id="text">這是一段文字</div>
jQuery:

    $(document).ready(function() {
      // 即時放大縮小字
      $("#text").hover(function() {
        $(this).animate({ fontSize: "36px" }, "fast");
      }, function() {
        $(this).animate({ fontSize: "24px" }, "fast");
      });
    });

延遲動畫效果 - 使用 delay()

CSS:

    #box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }

HTML:
<div id="box"></div>
jQuery:

    $(document).ready(function() {
      // 添加延遲效果
      $("#box").animate({
        width: "200px",
        height: "200px"
      }).delay(1000).fadeOut(); // 在動畫後延遲1秒再淡出
    });

停止動畫效果 - 使用 stop()

CSS:

    #box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }

HTML:

  <div id="box"></div>
  <button id="stopButton">停止動畫</button>

jQuery:

    $(document).ready(function() {
      var $box = $("#box");

      // 創建一個動畫效果
      function animateBox() {
        $box.animate({
          width: "200px",
          height: "200px"
        }, 1000);
      }

      // 點擊按鈕開始動畫
      $("#stopButton").click(function() {
        animateBox();
      });

      // 點擊方塊停止動畫
      $box.click(function() {
        $(this).stop();
      });
    });

插入 HTML 元素 - 使用 html() 和 text()

HTML:

  <div id="container">
    <div id="content">
      原始內容
    </div>
  </div>

  <button id="insertHTML">插入 HTML 元素</button>
  <button id="insertText">插入純文字</button>

jQuery:

    $(document).ready(function() {
      // 插入 HTML 元素
      $("#insertHTML").click(function() {
        $("#content").html("<p>這是插入的 <strong>HTML</strong> 元素。</p>");
      });

      // 插入純文字
      $("#insertText").click(function() {
        $("#content").text("這是插入的純文字。");
      });
    });

事件監聽 - 使用 click() 和 on()

HTML:
<button id="clickButton">點擊我</button>
jQuery:

    $(document).ready(function() {
      // 使用 click() 函式監聽點擊事件
      $("#clickButton").click(function() {
        alert("您點擊了按鈕！");
      });

      // 使用 on() 函式監聽事件
      $("#clickButton").on("mouseenter", function() {
        $(this).css("background-color", "lightblue");
      });

      $("#clickButton").on("mouseleave", function() {
        $(this).css("background-color", "white");
      });
    });