通过事件实现各项功能或执行某项操作,在元素与功能代码中起桥梁作用。
事件分为:基础事件与复合事件
基础事件:
事件名=”函数名()”;
或
DOM 对象.事件名=函数;
基础事件分
- 载入事件:加载页面、窗口调节等
- 鼠标事件
click() |
点击事件 |
mouseover() |
指针移过时(影响子元素) |
mouseout() |
指针移出时(影响子元素) |
mouseenter() |
指针进入时 |
mouseleave() |
指针离开时 |
- 键盘事件
keydown() |
按下按键时 |
keyup() |
释放按键时 |
keypress() |
产生可打印字符时 |
- 浏览器事件
调整浏览器大小
$(selector).resize();
绑定事件:
可以绑定一个或多个
bind(type,[date],fn)
bind()方法有三个参数
可以应用在js事件生成的对象中
type |
事件类型 |
如click、mouseover等事件或自定义事件 |
[date] |
可选参数 |
作为event.data属性值传递给事件对象的额外数据对象 |
fn |
处理函数 |
用来绑定处理函数 |
移除事件:
当事件执行完毕后需要把绑定的事件取消。
unbind([type],[fn]);
当unbind不带参数时表示去除所有绑定的事件
[type] |
事件类型 |
基础事件和自定义事件 |
[fn] |
处理函数 |
用来解除绑定的处理函数 |
复合事件
复合事件方法hover()和toggle(),都是jQuery自定义的方法
hover():鼠标移入元素触发(enter)再移出触发(leave)
hover(enter,levae);
toggle():分带参和不带参的方法,带参模拟鼠标点击,每点击一个产生一个(fn1)、(fn2)
toggle(fn1,fn2…fnN);
不带参时与shou、hide一样,如果是隐藏的切换为可见,如果可见,切换为隐藏
toggle();
在加载某个样式和移除某个样式之间切换
toggleClass(className);
控制元素显示
$(selector).show([speed],[callback]);
speed |
可选。规定元素从隐藏到可见的速度,默认为0 可选值:毫秒、slow、normal、fast 元素显示时会逐渐改变高度、宽度、外边距、内边距和透明的 |
callback |
可选。show执行后要执行的函数 |
控制元素隐藏:
$(selector).hide([speed],[callback]);
参数与shou相同
改变透明度
控制淡入:
$(selector).fadeIn([speed],[callback]);
控制淡出:
$(selector).fadeOut([speed],[calback]);
改变元素高度
调用slideDown元素会从上到下延申显示,slideUp会从下到上缩短至隐藏
$(selector).slideUp([speed],[callback]);
$(selector).slideDown([speed],[calback]);
自定义动画:
$(selector).animate({params},speen,callback);
params:必选,定义形成动画的CSS属性