7、jQuery中的事件与动画

–1、在JavaScript中,常用的基础事件有鼠标事件、键盘事件、window事件、表单事件。事件绑定和处理函数的语法格式如下。
语法：
事件名 = “函数名()”;
或者
DOM 对象.事件名=函数;
在事件绑定处理函数后,可以通过DOM对象.事件名()的方法显示调用处理函数。在jQuery中基础事件和JavaScript中的事件一致,它提供了特有的事件方法和处理函数绑定
–2、载入事件
window事件有文档载入事件,它对应的方法是ready()
–3、鼠标事件
-1.鼠标事件顾名思义就是当用户名在文档上移动时而产生的事件
-2.常用的鼠标事件的方法
方法 描述 执行时机
click() 触发或将函数绑定到指定元素的click事件 鼠标单击时
mouseover() 触发或将函数绑定到指定元素的mouseover事件 鼠标指针移过时
mouseout() 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时
mouseenter() 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时
mouseleave() 触发或将函数绑定到指定元素的mouseleave事件 键盘事件鼠标指针离开时
-3.语法：
$(“标签名”).鼠标事件的方法(function(){
//JavaScript代码
})
–4、键盘事件
-1.键盘样式指当键盘聚焦到Web浏览器,用户每次按下或者释放按键是就会产生事件。
-2.常用键盘事件的方法
方法 描述 执行时机
keydown() 触发或将函数绑定到指定元素的keydown事件 按下按键时
keyup() 触发或将函数绑定到指定元素的keyup事件 释放按键时
keypress() 触发或将函数绑定到指定元素的keypress事件 产生可打印的字符时
-3.键盘事件的执行顺序依次是keydown、keypress或keyup
–5、绑定事件
-1.在jquery中,如果需要为匹配的元素同时绑定一个或多个事件,则可以使用bind()方法,其语法格式如下。
语法：
bind(type,[data],fn)
-2.bind()方法有三个参数,其中参数data不是必须的
-3.bind()方法的参数
参数类型 参数含义 描述
type 事件类型 主要包括click、mouseover、mouseout等基础事件,此外,还可以是自定义事件
[data] 可选参数 作为event.data属性值传递给事件对象的额外数据对象,该参数不是必需的
fn 处理函数 用来绑定处理函数
–6、移除事件
-1.有时候事件执行完了,需要把绑定的事件通过一定的办法取消,在jQuery中,提供了移除事件的方法,在绑定事件时,可以为匹配元素绑定一个或多个事件,那么同样可以为之匹配的元素移除单个或多个事件,可以使用unbind()方法,其语法格式如下。
语法：
unbind([type],[fn])
unbind()方法有两个参数,这两个参数不是必须的,当unbind()不带参数时,表示移除所绑定的全部事件。
-2.unbind()方法的参数说明
参数类型 参数含义 描述
[type] 事件类型 主要包括click、mouseover、mouseout等基础事件,此外,还可以是自定义事件
[fn] 处理函数 用来解除绑定的处理函数
–7、复合事件
-1.在jQuery中有两个复合事件————hover()和toggle()方法,这两个方法与ready()类似,都是jQuery自定义的方法
-2.hover()方法
在jQuery中,hover()事件用于模拟鼠标指针移入和移出事件。当鼠标指针移至元素上时,会触发指定的第一个函数(enter);当鼠标指标移除这个元素时,会触发第二个函数(leave),该方法相当于mouseenter和mouseleave事件的组合。其语法格式如下。
语法：
hover(enter,leave);
-3.toggle()方法
1.在jQuery中,toggle分为带参数的方法和不带参数的方法;带参数的方法用于模拟的方法用于模拟鼠标连接click事件。第一次点击元素,触发指定的第一个函数(fn1);当再次单击同一个元素时,则触发指定的第二个函数(fn2);如果有更多函数,则依次触发,直到最后一个。随后的每次单击都重复对这几个函数轮番调用,toggle()方法的语法格式如下。
语法：
toggle(fn1,fn2,…fnN);
2.toggle()不带参数时,与show()和hide()方法的作用一样,切换元素的可见状态,如果元素是可见性,则切换为隐藏状态;如果元素是隐藏的,则切换为可见状态;语法格式如下。
语法：
toggle();
3.与jQuery中的toggle()方法一样,toggleClass()可以对样式切换,实现事件触发时某元素在"加载某个样式"和"移除某个样式"之间切换,语法格式如下。
语法：
toggleClass(className);
–8、jQuery中的动画
-1.控制元素显示
1.在jQuery中,可以使用show()方法控制元素的显示,还能定义显示元素是的效果。show()的语法格式如下。
2.语法：
$(selector).show([speed],[callback])
3.show()的参数说明
speed：
可选。规定元素从隐藏到完全可见的速度。默认为"0"。
可能值：毫秒(如1000)、slow、normal、fast。
在设置速度的情况下,元素从隐藏到完全可见的过程中,会逐渐改变高度、宽度、外边距、内边距和透明度
callback:
可选。show函数执行完之后,要执行的函数。
-2、控制元素隐藏
1.在jQuery中,可以使用hide()方法控制元素的隐藏,还能定义隐藏元素时的效果。hide()语法格式如下。
2.语法：
$(selector).hide([speed],[callback])
-3、控制元素淡入
1.在jQuery中,可以使用fadeln()方法控制元素的淡入,fadeln()方法的语法格式如下。
2.语法：
$(selector).fadeIn([speed],[callback])
3.fadeln方法的参数
speed:
可选。规定元素从隐藏到完全可见的速度。默认为"0"。
可能值：毫秒(如1000)、slow、normal、fast。
在设置速度的情况下,元素从隐藏到完全可见的过程中,会逐渐第改变其透明度,给视觉以淡入的效果。
callback:
可选。fadeIn函数执行完之后,要执行的函数。
除非设置了speed参数,否则不能设置该参数
-4、控制元素淡出
1.在jQuery中,fadeOut()方法可以控制元素淡出,还能定义显示元素时的效果。fadeOut()方法的语法格式如下。
2.语法：
$(selector).fadeOut([speed],[callback])
-5、改变元素高度
1.在jQuery中,用于改变元素高度的方法是slideUp()和slideDown()。若元素的display属性值为none,当调用slideDown()方法时,这个元素会从上向下衍伸显示,而slideUp()方法正好相反,元素从上到下缩短直至隐藏,slideUp()和slideDown()方法的语法格式如下。
2.语法：
$(selector).slideUp([speed],[callback])
$(selector).slideDown([speed],[callback])
3.参数说明:
speed为可选参数,用来规定改变元素高度的时长,它的取值也是slow、fast或毫秒
callback为可选参数,表示改变元素高度完成后执行的函数名称。
-6、自定义动画
1.语法：
$(selector).animate({params},speed,callback)
2.animate()的参数说明：
params:必须,定义形成动画的CSS属性。
speed:可选,规定效果时长,取值：毫秒、fast、slow.
callback:可选,滑动完成后执行的函数名称。