jQuery（2）动画和事件

基本动画

元素.show([speed],[callback])

元素.hide([speed],[callback])

元素.toggle([speed],[callback])

元素.slideDown([speed],[callback])

元素.slideUp([speed],[callback])

元素.slideToggle([speed],[callback])

元素.fadeIn([speed],[callback])

元素.fadeOut([speed],[callback])

元素.fadeToggle([speed],[callback])

自定义动画

元素.animate({params},[speed],[easing],[callback]);
参数：
- ① params ,必选。表示运动的哪些样式属性，用对象表示。
- ② [speed] ，可选，表示动画执行时长，数字表示毫秒。
- ③ [easing] ，可选，表示运动的方式，默认为swing（缓动）慢快慢可以是linear（匀速）。
- ④ callback，可选，表示动画执行完后要执行的程序，用函数表示。

动画的队列和动画停止

元素.stop([clearQueue], [jumpToEnd]);

参数：

clearQueue ，可选，表示是否清空动画队列。默认为false。若是false 时，会停止当前这一个动画，开始队列中的下一个动画。若是true 时，停止动画并清空所有的动画队列。

jupmToEnd ，可选，表示是否让当前动画直接达到目标值。默认为false 若是false 时，会直接停止当前动画，不会达到目标值。若是true 时，则会停止当前动画，直接达到目标值。

on事件

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据（可选），事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

简单事件注册：

// 给按钮注册事件
$('button').on('click', function(){
    console.log('click');
});

多个事件注册

$('button').on(
    {
        click:function() {
            console.log('click'),
        },
        mouseover:function() {
            console.log('mouseover'),
        },
        mouseout:function() {
            console.log('mouseout'),
        }    
    }
);

事件委托

// li的点击事件 全部委托给其父元素ul
$('ul').on('click', 'li', function(){
    alert($(this).text());
});

jQuery触发事件

触发方式1： 元素.事件名();
触发方式2： 元素.trigger('event name');

<script>
    $('#btn').click(function(){
        alert('触发了');
    });
    // 触发方式1
    $('#btn').click();
    // 触发方式2：
    $('#btn').trigger('click');
</script>

jQuery解绑事件

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off('click');

jQuery事件对象

$(document).click( function(e) {  // 形参e就是我们的 事件对象
  console.log(e);
});

// screenX和screenY    对应屏幕最左上角的值
// clientX和clientY    距离页面左上角的位置（忽视滚动条）
// pageX和pageY    距离页面最顶部的左上角的位置（会计算滚动条的距离）

// event.keyCode    按下的键盘代码
// event.data    存储绑定事件时传递的附加数据

// event.stopPropagation()    阻止事件冒泡行为
// event.preventDefault()    阻止浏览器默认行为
// return false 既能阻止事件冒泡，又能阻止浏览器默认行为。