jQuery 事件及动画

jQuery 事件

• jquery中的事件是将事件名作为方法名，传入回调函数即可。

$("div").click(function(){
});
$("div").mouseover(function(){
});

加载事件

• 在原生js中的页面加载事件是window.onload

推荐使用jquery的页面加载事件，jquery的页面加载要比js原生的写法效率高，因为js元素的页面加载事件需要等到页面中的所有资源加载完毕才执行，而jquery的页面加载事件只需要等到页面的标签加载完毕就执行，而不会等待外部文件加载。

• 在jquery中有两种写法：

$(function(){
});
$(document).ready(function(){
});

元素事件

on方法

• 用于绑定事件、委托事件、传入参数
• 语法：$(元素).on(事件类型,[委托的子元素],[传入的参数],处理的函数);

// 给 button 按钮绑定一个点击事件
$('button').on('click', function () {
    console.log('我被点击了')
})

// 给 button 按钮绑定一个点击事件，并且携带参数
$('button').on('click', { name: 'Jack' }, function (e) {
    console.log(e) // 所有的内容都再事件对象里面
    console.log(e.data) // { name: 'Jack' }
})

// 事件委托的方式给 button 绑定点击事件
$('div').on('click', 'button', function () {
    console.log(this) // button 按钮
})

// 事件委托的方式给 button 绑定点击事件并携带参数
$('div').on('click', 'button', { name: 'Jack' }, function (e) {
    console.log(this) // button 按钮
    console.log(e.data)
})

off方法

• 用于解绑事件
• 语法：$(元素).off(事件类型,处理函数)

// 给 button 按钮绑定一个 点击事件，执行 handler 函数
$('button').on('click', handler)

// 移除事件使用 off
$('button').off('click', handler)

trigger方法

• 用于手动触发事件：
• 语法：$(元素).trigger(事件类型,处理函数)

// 当代码执行到这里的时候，会自动触发一下 button 的 click 事件
$('button').trigger('click')

one方法

• 只能触发一次的事件：
• 语法：$(元素).one(事件类型,处理函数);

// 这个事件绑定再 button 按钮身上
// 当执行过一次以后就不会再执行了
$('button').one('click', handler)

常用事件

click事件

• 鼠标点击所触发的事件
• 语法：$("元素").click(处理函数)

// 直接给 div 绑定一个点击事件
$('div').click(function () {
    console.log('我被点击了')
})

// 给 div 绑定一个点击事件并传递参数
$('div').click({ name: 'Jack' }, function (e) {
    console.log(e.data)
})

dbclick事件

• 鼠标双击所触发的事件
• 语法：$("元素").dbclick(处理函数)

// 直接给 div 绑定一个双击事件
$('div').dblclick(function () {
    console.log('我被点击了')
})

// 给 div 绑定一个双击事件并传递参数
$('div').dblclick({ name: 'Jack' }, function (e) {
    console.log(e.data)
})

scroll事件

• 页面滚动所触发的事件
• 语法：$("元素").scroll(处理函数)

// 直接给 div 绑定一个滚动事件
$('div').scroll(function () {
    console.log('我被点击了')
})

// 给 div 绑定一个滚动事件并传递参数
$('div').scroll({ name: 'Jack' }, function (e) {
    console.log(e.data)
})

hover事件

• 鼠标放上去和鼠标离开所触发的事件
• 语法：$("元素").hover(鼠标放上去的处理函数,鼠标离开的处理函数)

// 这个事件要包含两个事件处理函数
// 一个是移入的时候，一个是移出的时候触发
$('div').hover(function () {
    console.log('我会再移入的时候触发')
}, function () {
    console.log('我会在移出的时候触发')
})

jQuery 动画

基本动画

1. 显示（show）

• 语法：元素.show();
• 让元素从隐藏状态变为显示状态（从display:none;变为 display:block;）
• 可选参数1：时间，毫秒数 == 让元素在规定的时间内显示（操作的属性有很多）
• 可选参数2：速度方式，匀速或加速或减速
• 可选参数3：动画结束后执行的回调函数

// 给 div 绑定一个显示的动画
$('div').show() // 如果元素本身是 display none 的状态可以显示出来

// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数') 
$('div').show(1000, 'linear', function () {
    console.log('我显示完毕')
}) 

2. 隐藏（hide）

• 语法：元素.hide();
• 让元素从显示状态切换到隐藏状态
• 可选参数和show一样

// 给 div 绑定一个隐藏的动画
$('div').hide() // 如果元素本身是 display block 的状态可以隐藏起来

// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数') 
$('div').hide(1000, 'linear', function () {
    console.log('我隐藏完毕')
}) 

3. 切换显示隐藏（toggle）

• 语法：元素.toggle();
• 让元素在隐藏和显示状态切换
• 可选参数和show一样

// 给 div 绑定一个切换的动画
$('div').hide() // 元素本身是显示，那么就隐藏，本身是隐藏那么就显示

// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数') 
$('div').toggle(1000, 'linear', function () {
    console.log('动画执行完毕')
}) 

4. 元素上下拉到隐藏显示

• 语法：

元素.slideDown() // 让元素向下拉动显示
元素.slideUp() // 让元素向上拉动隐藏
元素.slideToggle() // 让元素切换上下拉动显示隐藏
参数和show一样

5. 元素透明度显示隐藏

• 语法：

元素.fadeIn() // 让元素从透明度0变为1的显示
元素.fadeOut() // 让元素从透明度1变为0的隐藏
元素.slideToggle() // 让元素切换透明度显示隐藏
参数和show一样

6. 让元素切换到指定的透明度

• 语法：

元素.fadeTo(毫秒数,透明度,速度方式,结束的回调函数) // 让元素在指定的时间内切换到指定的透明度

自定义动画

开启动画

元素.animate({
    css属性名:属性值,
    css属性名:属性值,
    。。。
}[,毫秒数][,速度方式][,执行结束的回调函数]);

// 定义一个自定义动画
$('.show').click(function () {
    $('div').animate({
        width: 500,
        height: 300
    }, 1000, 'linear', function () {
        console.log('动画运动完毕')
    })
})

停止动画

元素.stop(); // 将动画停止在当前状态
元素.finish(); // 将动画停止在结束状态

// 立刻定制动画
$('div').stop() // 就停止再当前状态
// 立刻结束动画
$('div').finish() // 停止在动画结束状态

动画的链式操作

通常在一个动画中的所有css属性是同时进行的，想要将所有动画按顺序执行的话，可以将多个动画嵌套在动画结束的回调函数中，但是这样容易造成回调地狱，所以jquery提供了一个动画的链式操作，让所有动画组成一个队列，按顺序执行，例：

<style>
div{
    width: 100px;
    height:100px;
    background-color: red;
    position:absolute;
}
</style>
<body>
	<button class="start">按钮</button>
	<div></div>
</body>
<script src="./js/jquery.js"></script>
<script type="text/javascript">
$(".start").click(function(){
    $("div").animate({
        left:"300px"
    }).animate({
        top:"300px"
    }).animate({
        width:"300px"
    }).animate({
        height:"50px"
    })
});
</script>