jQuery事件与动画

 --01.合成事件

 　　jQuery有两个合成事件—hover()方法和toggle()方法，类似前面讲过的ready()方法，两者都属于jQuery自定义的方法。

　　--01.1hover()方法

　　　　语法结构：　hover(enter,leave);

　　hover()方法用于抹蜜光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数(enter);当光标移出这个元素时，会触发指定的第2个函数(leave)。

　　

    <script src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("[class=myclass]").hover(function () {
                $(this).addClass("custom");
            }, function () {
                $(this).removeClass("custom");
            });
        });
    </script>

 　　注意：hover()方法准确来说是替代jQuery中的bind("mouseeenter")和bind("mouseleave"),

　　　　而不是替代bind("mouseover")和bind("mouseout"),因此当需要触发hover()方法的第二个函数时，需要用trigger("mouseleave")来触发，而不是trigger("mouseout")。

　　--01.2toggle()方法

　　　　　　语法结构：   toggle(fn1,fn2,...fnN);

　　toggle()方法用于模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数(fn1);当再次单击同一元素时，则触发指定的第二个元素(fn2)；如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

//通过toggle来实现元素的显示和隐藏
//通过toggle来切换元素的可见状态
$(".top").toggle(
            function(){
                $(this).find(".iocn").removeClass("jia").addClass('jian'); 
                $(this).next().show(1500);
            },
            function(){ 
                 $(this).find(".iocn").removeClass("jian").addClass('jia'); 
                $(this).next().hide('slow');
        });

--02.事件冒泡

　　当触发DOM树里元素上的事件时，浏览器的事件处理机制会检查在那个元素上是否已经建立特定的事件处理程序。如果是，就调用处理程序。但到这儿事情还远远没有结束呢。

　　在目标元素获得机会处理事件之后，事件模型检查目标元素的父元素，看是否为同类型事件建立了处理程序。如果是，则也调用父元素的处理程序。在这之后，再检查其父元素，然后父元素，然后父元素···  持续不停知道DOM树的顶部。因为事件处理向上传播就像香槟酒杯里毛渠的气泡（假定DOM树的根在顶部），所以把这个过程称为事件冒泡。

　　示例：

　　假设如上面的代码块中每一个标签都被添加上了click事件（span和div都属于body 触发span或者div都会触发到其上一级直至顶级的事件），但我现在想在单击span的时候，不会触发到其上一级直至顶级的事件。那么该如何来做呢？

　　       //针对这一问题，jQuery进行了必要的扩展和封装，从而使得在任何浏览器中都能很轻松的获取事件以及事件对象的一些属性。

<script type="text/javascript">
        //使用事件对象的方法：只需要为函数添加一个参数。
        $("span").bind("click", function(event) {  //event：事件对象
            //这样，当单机"span"元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。
            //停止事件冒泡：可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡。
            alert("body里div中的span标签被单击了！");
            event.stopPropagation();  //停止事件冒泡
        });
    </script>

　　 这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。

扩展：网页中的元素有自己默认的行为，例如：单击超链接后或跳转、单击"提交"按钮后表单会提交，有时需要组织元素的默认行为。在jQuery中，提供了preventDefault()方法来组织元素的默认行为。

　　　　在单击"提交"按钮时，验证表单内容，例如某元素是否是必填字段，某元素是否够6位等，当表单不符合提交条件时，要组织表单的提交(默认行为)。

　　eg:   event.preventDefault();//组织默认行为(表单提交)