jQuery的事件和动画

一、事件

1.侦听事件：

$("div").on("click.a",function(){//侦听事件
            console.log("aaa");
            $("div").off("click");//删除点击
        })

2.仅用一次的事件

$("div").one("click",function(){
            console.log("aaa");
        })

3.事件的第二位除了可以是事件函数，还可以加入事件侦听传递的参数

var obj={
            init:function(){
                var o={a:1};
                // 事件的第二位除了可以是事件函数，还可以加入事件侦听传递的参数
                $("div").on("click",o,this.clickHandler);
            },
            clickHandler:function(e){
                console.log(e.data);
            }
        };
        obj.init();

4.划过

$("div").hover(function(){
            $(this).css("backgroundColor","green");
        },function(){
            $(this).css("backgroundColor","red");
        })

5.ready执行

window.onload 所有DOM创建完成，并且完成渲染，所有图片内容全部加载完成 执行
$(document).ready 所有DOM创建完成执行

6.取消冒泡，取消默认

$("div").on("click",function(e){
            e.preventDefault();
            e.stopPropagation();
        })

7.自定义事件的第二位

//收到自定义事件时，可以通过参数的第二位起接收所有数据
$("div").on("chilema",function(e,a,b,c){
        console.log(e,a,b,c);
         });
//可以通过trigger中的第二个参数以数组的形式传递多个元素到事件中
    $("div").trigger("chilema",[3,5,6]);

二、动画

1.显示隐藏，放大缩小hide和show

$("button").click(function(){
            $("div").hide(2000).show(2000);
            //点击先放大后缩小
        })

2.向上拉动隐藏 slideUp slideDown slideToggle

$("button").click(function(){
            $("div").slideUp(2000).slideDown(2000);
        });
        $("button").click(function(){
            $("div").slideToggle(2000);
        });

3.淡入淡出隐藏 fadeOut fadeTo fadeToggle

$("button").click(function(){
            // $("div").fadeOut(2000).fadeIn(2000);
            // $("div").fadeTo(2000,0.5);//透明到什么值
            $("div").fadeToggle(2000);
        });

4.animate运动

$("div").animate({//先放大
            width:50,
            height:50,
            left:100,
            top:100
        },500).animate({//左移动
            left:300
        },500).animate({
            top:300
        },500).animate({
            left:100
        },500).animate({
            top:100
        },500)