iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

我的網頁前端小小小教室系列 第 28

Day28 JQuery應用

JQuery的應用有非常多種,概念就是當觸發條件達成時,我要做些甚麼,例如:滑鼠單擊一下,隱藏的選單跑出來,或是滾動網頁到下方時,蓋板廣告跑出來。都是JQuery的應用!

例子:當我點abox時bbox會隱藏起來。

建立兩個寬高一樣,背景顏色不同的方塊。

    <style>
        .abox{
            width: 200px;
            height: 200px;
            display: inline-block;
            background-color: green;
        }
        .bbox{
            width: 200px;
            height: 200px;
            display: inline-block;
            background-color:red;
        }
    </style>
    
    <div class="abox">abox</div>
    <div class="bbox">bbox</div>

接下來就是撰寫我們JQuery的部分!點到abox時bbox要隱藏住。

    <script>
        $(document).ready(function(){
            // 要執行的動作
            $('.abox').click(function(){
                $('.bbox').hide();
            })
        })

    </script>

當點下去後bbox就會消失,但是這樣子,我想要按一下他能夠再回來要怎麼做呢?
這樣的話就要把hide屬性改成toggle

$(document).ready(function(){
            // 要執行的動作
            $('.abox').click(function(){
                $('.bbox').toggle();
            })
        })

那如果我又不想要單擊,我想要點兩下他才會隱藏怎麼辦呢?我們就把click改成dblclick

        $(document).ready(function(){
            // 要執行的動作
            $('.abox').dblclick(function(){
                $('.bbox').toggle();
            })
        })

是不是比想像中簡單很多呢?

這就完成像我們手機很常用到的選單,按一個按鈕跳出分類的應用,是不是十分方便!而像是JQuery還有許多應用,可以在JQuery的事件event裡面去看該怎麼用。

像是光滑鼠事件就有分許多的類型!也是我們比較常用到的。

今天的JQuery應用就講到這拉!改謝大家的支持。

參考資料:https://www.youtube.com/watch?v=CDO8AkK2HnE&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=27


上一篇
Day27 Javascript元件庫 Jquery介紹
下一篇
Day29 JQuery蓋板廣告應用
系列文
我的網頁前端小小小教室30

1 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-12 18:33:49

恭喜即將完賽!!!

我要留言

立即登入留言