jQuery事件与特效

jQuery事件与特效

jQuery事件

​ 在网页中的交互是需要事件来实现的，jQuery事件是对JavaScript事件的封装,常用的事件可以分为基础事件以及复合事件

基础事件

鼠标事件

是当用户在文档上移动或单击鼠标时产生的事件

方法	描述	执行时机
click()	触发或将函数绑定到指定元素的click事件	鼠标单击时
mouseover()	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout()	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter()	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave()	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

鼠标事件方法的区别：

相同点：

mouseover()和mouseenter()都是鼠标进入被选元素时会触发，mouseout()和mouseleave()都是鼠标离开被选元素时会触发

不同点：

1.鼠标在其被选元素的子元素上来回进入时，触发mouseover(),不触发mouseenter()

2.鼠标在其被选元素的子元素上来回离开时，触发mouseout(),不触发mouseleave()

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件

方法	描述	执行时机
keydown()	触发或将函数绑定到指定元素的keydown()事件	按下键盘时
keyup()	触发或将函数绑定到指定元素的keyup()事件	释放按键时
keypress()	触发或将函数绑定到指定元素的keypress()事件	按下产生可打印字符的按键时

浏览器事件

调整窗口大小时，完成页面特效

语法：

$(selector).resize();

复合事件

hover()方法

相当于mouseover()与mouseout()事件的组合

语法：

hover(enter,leave);

enter为鼠标移入时的执行函数

leave为鼠标移出时的执行函数

示例：

$(".top-m .on").hover(function{
	$(".topDown").show();
	},
	function(){
	$(".topDown").hide();
	}
);

toggle()方法

用于模拟鼠标连续click事件

语法：

toggle(fn1,fn2,...,fnN);

toggle()方法不带参数，与show()和hide()方法作用一样

示例：

$("input").toggle(
  function(){$("body").css("backgroundcolor","red");},
  function(){$("body").css("backgroundcolor","green");}
)

toggleClass()

可以对样式进行切换

toggleClass(className);

toggle()与toggleClass()区别

1.toggle(fn1,fn2…)实现单击事件的切换，无须额外绑定click事件

2.toggle()实现事件触发对象在显示和隐藏状态之间切换

3.toggleClass()实现事件触发对象在加载某个样式和移除某个样式之间切换

绑定和移除事件

绑定事件

语法：

bind(type,[data],fn);

type为事件类型，主要包括click、mouseover、mouseout等基础事件，也可以是自定义事件

[data]为可选函数

fn为处理函数

可以绑定单个事件，也可以同时绑定多个事件

示例：

$(".top-m .on").bind({
		mouseover:function(){
				$(".topDown").show();
		},
		mouseout:function(){
				$(".topDown").hide();
		}
})

移除事件

语法：

unbind([type],[fn]);

当unbind不带参数时，表示移除所绑定的全部事件

jQuery动画效果

jQuery提供了很多动画效果

控制元素显示与隐藏

通过show()控制元素的显示，hide()控制元素的隐藏

语法：

$(selector).show([speed],[callback]);
$(selector).hide([speed],[callback])

speed表示速度，默认为"0",可能值：毫秒（如1000）、slow、normal、fast

callback为show或hide函数执行完后要执行的回调函数

示例：

$(".top-m .on").hover(function{
	$(".topDown").show("slow");
	},
	function(){
	$(".topDown").hide("fast");
	}
);

改变元素的透明度

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])

改变元素的高度

slideDown()可以使元素逐渐延伸显示

slideUp()可以使元素逐步缩短直至隐藏

$(selector).slideUp([speed],[callback])
$(selector).slideDown([speed],[callback])

示例：

$("h2").click(function(){
	$(".txt").slideUp("slow");
	$(".txt").slideDown("slow");
});

自定义动画

语法：

$(selector).animate({params},speed,callback)

params为定义形成动画的CSS属性