jQuery中的事件与动画
一、jQuery中的事件
01、基础事件
载入事件 ready()方法 $(document).ready(function(){...}) 简写$(function(){...})
鼠标事件
click() 鼠标单击时
mouseover() 鼠标指针移过时,进入本身和其子元素都会触发一次
mouseout() 鼠标指针移出时,移出本身和其子元素都会触发一次
mouseenter() 鼠标指针进入时,只有进入本身会触发一次,在进入子元素不会触发
mouseleave() 鼠标指针离开时,只有离开本身会触发一次,只离开其子元素不会触发
键盘事件
keydown() 按下按键时
keyup() 释放按键时
keypress() 产生可打印的字符时
浏览器事件
resize() 调整窗口大小时
02、绑定事件和移除事件
事件绑定(解除绑定):on(off)、bind(unbind)、live(die)
/*针对于我们 新增的li 没有事件 解决方案! 绑定事件 $("ul").on("mouseover","li",function(){ $(this).css({"background":"red"}); }); $("ul").on("mouseout","li",function(){ $(this).css({"background":"pink"}); });*/
$("ul").on({ //同时绑定多个事件 mouseover:function(){ $(this).css({"background":"red"}); }, mouseout:function(){ $(this).css({"background":"pink"}); }},"li"); /*解除绑定事件*/ $("#btnClose").click(function(){ $("ul").off("mouseover"); }) /*事件bing 绑定 解除绑定 unbind*/ $("li").bind({ mouseover:function(){ $(this).css({"background":"red"}); }, mouseout:function(){ $(this).css({"background":"pink"}); } }) /*事件live 绑定 解除绑定 die*/ $("li").live({ mouseover:function(){ $(this).css({"background":"red"}); }, mouseout:function(){ $(this).css({"background":"pink"}); } })
绑定事件
语法: bind(type,[data,]fn)
type 事件类型 主要包括click、mouseover、mouseout等基础事件,还可以是自定义事件
data 可选参数 作为event.data属性值传递给事件对象的额外数据对象,
fn 处理函数 用来绑定处理函数
移除事件
语法: unbind([type,[fn]])
type 事件类型
fn 处理函数
两个参数不是必须的,当unbind不带参数时,表示移出所有绑定的全部事件
03、复合事件
hover()方法
语法: hover(enter,leave)
toggle()方法
语法: toggle(fn1,fn2,···,fnN);
带参数的方法用于模拟鼠标连续click事件,所有函数走完,下次点击重新开始
不带参数的方法,与show()和hide()一样,切换元素的可见性
toggleClass()方法
语法: toggleClass(className)
实现事件触发某元素在“加载className类样式”和“移除className样式”之间的切换
二、jQuery中的动画
01、控制元素的显示和隐藏
控制元素的显示
语法: $(selector).show([speed],[callback])
控制元素的隐藏
语法: $(selector).hide([speed],[callback])
speed 可选 元素从隐藏(显示)到显示(隐藏)的速度,毫秒为单位,默认为0,也可以直接用slow、normal、fast
callback 可选 函数执行完之后,要执行的函数
02、改变元素透明度
控制元素淡入
语法: $(selector).fadeIn([speed],[callback])
speed 可选 元素从隐藏到完全可见的速度,毫秒为单位,默认为0,也可以直接用slow、normal、fast
callback 可选 函数执行完之后,要执行的函数。除非设置了speed参数,否则不能设置该参数
控制元素淡出
语法: $(selector).fadeOut([speed],[callback])
03、改变元素高度
向下延伸显示: $(selector).slideDown([speed],[callback])
向上延伸显示: $(selector).slideUp([speed],[callback])
speed 可选 元素从隐藏到完全可见的速度,毫秒为单位,默认为0,也可以直接用slow、normal、fast
callback 可选 函数执行完之后,要执行的函数
04、自定义动画
语法: $(selector).animate({params},speed,callback)
params 必须,定义形成动画的CSS属性
speed 可选,规定效果时长,毫秒,fast、slow。
callback 可选,滑动完成后执行的函数名称