--1、在java script中,常用的基础事件有鼠标事件、键盘事件、window事件、表单事件。事件绑定和处理函数的语法格式如下。
语法:
事件名 = "函数名()";
或者
DOM 对象.事件名=函数;
在事件绑定处理函数后,可以通过DOM对象.事件名()的方法显示调用处理函数。在jQuery中基础事件和java script中的事件一致,它提供了特有的事件方法和处理函数绑定
--2、载入事件
window事件有文档载入事件,它对应的方法是ready()
--3、鼠标事件
-1.鼠标事件顾名思义就是当用户名在文档上移动时而产生的事件
-2.常用的鼠标事件的方法
方法 描述 执行时机
click() 触发或将函数绑定到指定元素的click事件 鼠标单击时
mouseover() 触发或将函数绑定到指定元素的mouseover事件 鼠标指针移过时
mouseout() 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时
mouseenter() 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时
mouseleave() 触发或将函数绑定到指定元素的mouseleave事件 键盘事件鼠标指针离开时
-3.语法:
$("标签名").鼠标事件的方法(function(){
//java script代码
})
--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()