JQ總務處｜選擇器與方法｜深入淺出jQuery

#jq #jq總務處 #深入淺出 jQuery #click #variable #floor #random #append #prepend #$(this) #remove #empty #slideUp #slideDown #slideToggle #fadeIn #fadeOut #fadeToggle #fadeTo

Posted by itiswonderfall on 2022-05-19

前言

接下來終於開始進入實作練習，否則看第一章時真的有點想睡哈哈哈，第一個需求是：

『 頁面要有四個區塊，每個區塊各具有四張圖，我需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ），當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方，如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。 』

 

整理一下需求清單

☐ 頁面要有四個區塊，每個區塊各具有四張圖。
☐ 區塊是可以點擊的。
☐ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☐ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。

 

 

那我們就先把 HTML 跟 CSS 做出來吧

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Jump for joy Sale</title>
    </head>
    <body>
        <div id="header">
            <h2>Jump for joy Sale</h2>
        </div>
        <div id="main">
            <div><img src="images/jump1.jpg" alt=""></div>
            <div><img src="images/jump2.jpg" alt=""></div>
            <div><img src="images/jump3.jpg" alt=""></div>
            <div><img src="images/jump4.jpg" alt=""></div>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    </body>
</html>

CSS

<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    div {
        float: left;
        text-align: left;
    }
    #header {
        width: 100%;
        border: 0;
        height: 50px;
    }
    #main {
        background-color: #ddd;
        height: 650px;
    }
    #main div {
        max-width: calc(25% - 6px);
        border: 3px solid #000;
    }
    img {
        max-width: 100%;
        vertical-align: middle;
    }
</style>

（ 圖片來源 — 低角度攝影的人跳、在藍天下跳躍的女人、半空中跳躍、女人跳 ）

 

檢視需求清單，目前進度是

☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☐ 區塊是可以點擊的。
☐ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☐ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。

 

 

開始來探究點擊（ click ）事件

為頁面添加 click 方法：

function

  1. 包含 jQuery 程式庫的標籤
  2. 確認頁面已經準備好進行互動
  3. 想要將點擊事件附加在哪個元素上
  4. 告訴 JS 直譯器元素在被點擊（ click ）時做某事
  5. 函式是一種將我們想做的事情集合起來的機制
  6. 用大括號 { } 來包含程式碼區塊（ code block ）
  7. 因為它位在點擊動作的小括號中 ( ) ，該函式就會在點擊被觸發時開始執行

 

<script> 標籤為什麼要在 </body> 標籤之前？

過去大家都認為在 <head> 與 </head> 之間是最佳實務建議，不過指令稿所引發的問題是它們會阻斷瀏覽器裡頭的平行下載，來自不同伺服器的圖像可能同時間被下載，一旦你的瀏覽器遇到 <script> 標籤，它就不能再平行下載多個項目，把它們安排在底部才能有助於加速載入你的頁面。

 

接下來把需要點擊的區塊命名為 guess_box 並把 click 事件附加上去

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Jump for joy Sale</title>
    </head>
    <body>
        <div id="header">
            <h2>Jump for joy Sale</h2>
        </div>
        <div id="main">
            <div class="guess_box"><img src="images/jump1.jpg" alt=""></div>
            <div class="guess_box"><img src="images/jump2.jpg" alt=""></div>
            <div class="guess_box"><img src="images/jump3.jpg" alt=""></div>
            <div class="guess_box"><img src="images/jump4.jpg" alt=""></div>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        <script>
            $(document).ready(function() {
                $(".guess_box").click(function() {
                    alert("你碰到我了！");
                });
            });
        </script>
    </body>
</html>

 

檢視需求清單，目前進度是

☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☑ 區塊是可以點擊的。
☐ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☐ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。

 

 

建立儲存空間

我們使用變數（ variable ）來儲存會變化的資訊（ 或資料 ），可以把變數想像成一個蘿蔔一個坑，像下面的圖一樣，坑（ 內褲 ）指的是「 變數 」，而蘿蔔（ 😳 ）就是「 值 value 」，讓你能更好管理裡面的資料。（ 更多變數內容可以參考 基本資料型態、變數 ）

一個蘿蔔一個坑

（ 圖片來源 ）

 

所以我們現在要產生名為 discount 的變數，裡頭塞從 5 到 10 隨機數的蘿蔔。

<script>
    $(document).ready(function() {
        $(".guess_box").click(function() {
            var discount = Math.floor((Math.random()*5) + 5);
            var discount_msg = "<p>你的折扣是 " + discount + "%</p>";
        });
    });
</script>

floor 是無條件捨去小數到最接近的整數並回傳結果； random 是回傳 0 到 1 之間的隨機數，所以上面的程式碼可以得出最小數（ 0+5 ）、最大數（ 5+5 ）。

 

接下來用附加事件插入訊息

當你想要用插入頁面的方式來增加新訊息，這裡提供兩個方法：

名稱 介紹 範例
append 在元素的結尾（ 仍然在內部 ）插入內容。 append
prepend 在元素的開頭（ 仍然在內部 ）插入內容。 prepend

 

所以這裡我們要使用 append 將變數附加到 guess_box 元素下

<script>
    $(document).ready(function() {
        $(".guess_box").click(function() {
            var discount = Math.floor((Math.random()*5) + 5);
            var discount_msg = "<p>你的折扣是 " + discount + "%</p>";
            $(".guess_box").append(discount_msg);
        });
    });
</script>

 

檢視需求清單，目前進度是

☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☑ 區塊是可以點擊的。
☑ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☐ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。

 

 

用 $(this) 指向當前元素

但現在發生一個錯誤！折扣訊息被重複顯示在每個 div 中，我們必須將變數僅附加在被點擊的那個 div 上，那我們該怎麼做呢？

如果我們想要「 特定地 」指出我們選擇的元素，最簡單的選擇器就是 $(this) 。
把 $(this) 想成是「 取決於情境的 」，它會隨著你在哪裡或何時使用而有所不同。

this

<script>
    $(document).ready(function() {
        $(".guess_box").click(function() {
            var discount = Math.floor((Math.random()*5) + 5);
            var discount_msg = "<p>你的折扣是 " + discount + "%</p>";
            $(this).append(discount_msg);
        });
    });
</script>

 

檢視需求清單，目前進度是

☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☑ 區塊是可以點擊的。
☑ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☑ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。

 

 

使用刪除事件斬草除根

前面都運作得很好，但是我在每次點擊時都會持續得到折扣碼，要如何阻止這種事發生呢？

名稱 介紹 範例
remove 刪除被選元素及其子元素。 remove
empty 刪除被選元素的子元素。 empty

這邊我們使用 remove 讓一或多組元素從頁面上消失，然後再將具有 guess_box 類別的所有 p 標籤連根拔起，把它放在點擊事件下方，這樣就可以先移除再生成（ 順序的重要性！ ）。

$(document).ready(function() {
    $(".guess_box").click(function() {
        $(".guess_box p").remove();
        var discount = Math.floor((Math.random()*5) + 5);
        var discount_msg = "<p>你的折扣是 " + discount + "%</p>";
        $(this).append(discount_msg);
    });
});

 

需求清單完成，可以收工了

☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☑ 區塊是可以點擊的。
☑ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☑ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☑ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。

 

 

這裡補充第一章提到的兩個效果

 

滑動效果

利用 slide 效果來控制 HTML 元素的 height （ 高度 ）性質。

名稱 介紹 範例
slideUp 滑上效果是改變元素的 height 性質，直到它變成 0 ，接著隱藏該元素。 slideup
slideDown 滑下效果是改變元素的 height 性質，從 0 到它在 CSS 樣式中所設定的大小。 slidedown
slideToggle 滑動切換效果指的是「 如果現在是滑上就改成滑下，反之滑下就改成滑上。 」 slidetoggle

 

淡入 / 淡出效果

利用 fade 效果來控制 HTML 元素的 opacity （ 不透明 ）和 transparency （ 透明 ）性質。

名稱 介紹 範例
fadeIn 淡入已隱藏的元素 fadein
fadeOut 淡出可見元素 fadeout
fadeToggle 淡化切換效果指的是「 如果現在元素是可見的淡出，反之隱藏的就淡入。 」 fadetoggle
fadeTo 淡化成賦予給元素的不透明度（ 值介於 0 與 1 之間 ） fadeto

 

 

參考資料

深入淺出 jQuery （ Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 ）


#jq #jq總務處 #深入淺出 jQuery #click #variable #floor #random #append #prepend #$(this) #remove #empty #slideUp #slideDown #slideToggle #fadeIn #fadeOut #fadeToggle #fadeTo

itiswonderfall
前端工程師
瑪莉．羅賓遜說：「每個人都可以從今天開始，創造一個全新的結局。」




Related Posts

[html] 暗藏玄機的跨域連結 - link rel

[html] 暗藏玄機的跨域連結 - link rel

 vii120
[#006] 344. Reverse String

[#006] 344. Reverse String

 s1101192101
AI輔導室｜製作幾何消隱效果

AI輔導室｜製作幾何消隱效果

 itiswonderfall

Comments