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里面去看该怎麽用。