本文共 4390 字，大约阅读时间需要 14 分钟。

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>