初学jQuery(冒泡事件，动画效果)

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。

HTML代码：

    <div id="content">
        外层div
        <div id="msg">
            内层div
        </div>
    </div>

css代码：

        #content {
            width: 140px;
            border: 1px solid blue;
        }

        #msg {
            width: 100px;
            height: 100px;
            margin: 20px;
            border: 1px solid red;
        }

jQuery代码：

    $(function(){
        // 为内层div绑定click事件
        $("#msg").click(function(){
            alert("我是小div");
        });
     // 为外层div元素绑定click事件
        $("#content").click(function(){
            alert("我是大div");
        });
        // 为body元素绑定click事件
        $("body").click(function(){
            alert("我是body");
        });
    });

效果：

点击内层DIV就会以此放大

动漫（show hide）

HTML代码：

    <div class="abc" style="display:none">
        <span>我可以动</span>
    </div>
    <input type="button" class="but" value="点击" />

jQuery代码：

        $(document).ready(function (e) {
            $(".but").click(function (e) {
                $(".abc").toggle();
            });
        });

效果图：
点开默认：

单机按钮：