20151008jq3

1、toggleClass();样式交替执行

<input type="button"  value="我是一个按钮" id="btn"/>
<div class="d1">你好</div>

.d1{ width:100px; height:100px; border:1px solid red;}
.d2{ color:Red;}

$(function () {
    $("#btn").click(function () {
        $(".d1").toggleClass("d2");//在样式d2和d1中转换
    });
});

2、事件mouseover()鼠标移动到元素上时

  $(".d1").mouseover(function () {
        $(this).hide(1000);//当前元素隐藏
    });

3、事件mouseout()鼠标移走之后

    $(".d1").mouseout(function () {
        alert("aaa");//弹出窗口
    });

4、事件 上面两个事件合并 hover()

    $(".d1").hover(function () {
        $(this).hide(1000);//隐藏
    }, function () {
        $(this).show(1000);//显示
    });

5、toggle()显示隐藏交替执行（当单击按钮后，交替执行隐藏显示）只能执行显示隐藏事件。

    $("#btn").click(function () {
        $(".d1").toggle(1000);//1秒内隐藏 再次点击时1秒内显示
    });

6、特殊的toggle()交替执行自定义的事件

 //交替执行函数里的事件，可以执行自定义的事件,jquery低版本的支持，高版本的不支持。
    $("#btn").toggle(function () {
        $(".d1").css("background-color", "black"); //第一次点击时执行的事件
    }, function () {
        $(".d1").css("background-color", "white");//第二次点击时执行的事件
    });