一、jQuery中的事件
jQuery事件是对JavaScript事件的封装,常用事件分类
基础事件
鼠标事件
键盘事件
window事件
表单事件
复合事件
鼠标光标悬停
1、鼠标事件
click(单击事件)
mouseover(鼠标移过)
mouseout(鼠标移出)
mouseenter(鼠标移入)
mouseleave(鼠标离开)
☆鼠标事件方法的区别
1、mouseover(鼠标移过) mouseenter(鼠标移入)
相同点:鼠标进入子元素时会触发
不同点:鼠标在子元素上来回进入时触发 mouseover 不触发 mouseenter
2、mouseout(鼠标移出) mouseleave(鼠标离开)
相同点:鼠标离开子元素时会触发
不同点:鼠标在子元素上来回离开时触发 mouseout 不触发 mouseleave
2、键盘事件
keydown()按下键盘时
keyup ()释放键盘时
keypress()产生可打印字符时
3、浏览器事件
调整窗口大小时,完成页面特效
$(selector).resize( );
图示:
index方法
jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。
图示:index方法获取下标
二、绑定事件与移除事件
1、绑定事件
on(type,fn);
Type:事件类型,主要包括click、mouseover、mouseout等基础事件,此外,还可以是自定义事件
Fn:处理函数
图示:绑定单个事件
点击后
绑定多个事件
利用on给未来元素,做事件委托处理
on后面第一参数是事件名称 第二个参数是未来元素 第三个参数是绑定的方法
图示:
2、移除事件
off()方法
off(“type”)
Type:事件类型,主要包括:blur、focus、click、mouseout等基础事件,此外,还可以是自定义事件
当off()不带参数时,表示移除所绑定的全部事件
hover()方法
hover()方法相当于mouseover与mouseout事件的组合
hover(enter,leave);
第一个函数表示光标移入时触发(相当于mouseover),第二个函数表示光标移出时触发(相当于mouseout);
toggle()方法
toggle()方法不带参数,与show( )和hide( )方法作用一样
三、jQuery动画效果
控制元素的显示及隐藏
show(speed,callback ) 控制元素的显示,
hide( speed,callback)控制元素的隐藏
show和hide里面可以传参数,可以传毫秒数和出现的快慢(slow、normal、fast)以及函数;
speed 可选。表示速度,默认为“0”,可能值:毫秒(如1000)、slow、normal、fast
callback 可选。show函数执行完之后,要执行的函数
图例:
改变元素的透明度
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果;
也可以传参数,可以传毫秒数和出现的快慢(slow、normal、fast)以及函数;
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
改变元素的高度
slideDown()可以使元素逐步延伸显示(也就是逐向下展示)
slideUp()则使元素逐步缩短直至隐藏(也就是逐步向上隐藏)
也可以传参数,可以传毫秒数和出现的快慢(slow、normal、fast)以及函数;
自定义动画:animate()
只支持动画,不支持背景颜色变化;