jQuery事件与动画

时间:2022-12-29 11:22:45
什么是事件?

事件是指用户对文档进行访问的一种交互行为

鼠标事件

click 鼠标单击元素时

mousemove() 鼠标移入元素时

mouseout() 鼠标移出元素时

mouseenter() 鼠标进入元素时

mouseleave() 鼠标离开时

注意:鼠标移入和移出的区别

移入:只要在元素内移动就会触发

进入:只要在元素内,不管怎么移动,只会触发一次

键盘事件

keydown() 键盘按键按下时

keyup() 键盘按键抬起时

keypress() 键盘可打印字符按下时 除功能键以外

$(document).keydown(function(key){} 直接获取按键对象 key就是按键对象

keyCode() 获取键盘上的ascll码值

窗口事件

指窗口发生大小改变时触发

$(window).resize(function(){

alert("调整窗口")

});

绑定事件

$("div").bind("事件名",function(){}) 单个绑定

$("div").bind({

事件名1,function(){},事件名2,function(){}.......

解除绑定

$("div").unbind("事件1") 解邦单个

$("div").unbind() 事件全部失效

$("div").unbind("事件1","事件2")

复合事件

$("button").hover(鼠标进入,鼠标离开)

$("button").hover(function(){},function(){});

$("button").toggle(函数1,函数2,......)

$("button").toggle(function(){},function(){},......)

$("p").toggleClass("类样式名"); 添加和移除整个样式

$("p").toggleClass("text");

动画

显示和隐藏

显示

show(过渡时间,function(){}) 显示完后,执行后面的函数

show(过渡时间,函数名)

function 函数名(){} 可执行的外部函数

隐藏

hide(过渡时间,function(){}) 等待显示完后,执行后面的函数

hide(过渡时间,函数名) 时间可以为毫秒,也可以为 solw慢 normal默认 fast快

function 函数名(){} 可以执行的函数

淡入和淡出

淡入

fadeln(过渡时间,function(){}) 显示完后,执行后面的函数

fadeln(过渡时间,函数名)

function 函数名(){} 可执行的外部函数

淡出

fadeOut(过渡时间,function(){}) 等待显示完后,执行后面的函数

fadeOut(过渡时间,函数名) 时间可以为毫秒,也可以为 solw慢 normal默认 fast快

function 函数名(){} 可以执行的函数

延申和缩短

延申

slideDown(过渡时间,function(){}) 显示完后,执行后面的函数

slideDown(过渡时间,函数名)

function 函数名(){} 可执行的外部函数

缩短

slideUp(过渡时间,function(){}) 等待显示完后,执行后面的函数

slideUp(过渡时间,函数名) 时间可以为毫秒,也可以为 solw慢 normal默认 fast快

function 函数名(){} 可以执行的函数

动画特效

animate({"属性":"属性值""属性值1":"属性值1"......},动画时间,function(){})

animate({"属性":"属性值""属性值1":"属性值1"......},动画时间,函数名)

unction 函数名(){} 可执行外部函数