2、常用鼠标事件的方法
方法 | 描述 | 执行时机 |
click() | 触发或将函数绑定到指定元素的click事件 | 鼠标单击时 |
mouseover() | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
mouseout() | 触发或将函数绑定到指定的元素的mouseout事件 | 鼠标指针移除时 |
mouseenter() | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入时 |
mouseleave() | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
方法 | 描述 | 执行时机 |
keydown() | 触发或将函数绑定到指定元素的keydown事件 | 执行按键时 |
keyup() | 触发或将函数绑定到绑定到指定元素的keyup事件 | 释放按键时 |
keypress() | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
4、绑定事件和移除事件
1.绑定事件
bind 语法 : bind(type,[data],fn)
type 事件类型 主要包括click,mouseover,mouseout等基础事件,此外,还可以时自定义事件
[data] 可选参数 作为event,data属性值传给事件对象的额外数据对象,该参数不是必须的
fn 处理函数 用来绑定处理函数
实例:
示例:
$(".dv).bind({
mouseover : $(".topDown").show();
mouseout : $(".topDown").hide();
})
移除 bind();
语法:unbind([type],[fn]);
实例:
$("#del").click(function{
$("#nav li:first").unbind("click",content1);
})
on :在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off()。要附加一个事件,只运行一次,然后删除
语法:on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
实例:
$("p").on("click", function(){
alert( $(this).text() );
});
移除 on();
实例:
$("p").off()
5、复合事件:
1.hover()方法
hover()方法用于模拟鼠标的指针移入和移除事件。相当于mouseover和mouseout事件。
语法 hover(enter,level);
实例:
$("li").hover(
function () {
$(this).children("div").show();
$(this).toggleClass("orange");
}, function () {
$(this).children("div").hide();
$(this).toggleClass("orange");
} )
6、控制元素显示和隐藏
1.控制元素显示
$(selector).show([speed],[callback]);
speed 可选,规定元素从隐藏到完全可见的速度,默认为“0”, 可选值:毫秒(1000),slow,normal,falst
在设置素的情况下,元素从隐藏到完全可见的过程中,会逐渐地改变高度,宽度,外边距,内边距和透明度
callback 可选。show函数执行完毕后,要执行的函数
2.控制元素隐藏
$(selector).hide([speed].callback]);
7、淡入淡出 事件:
1、$(selector).fadeIn([speed].callback]); 淡入
2、$(selector).fadeOut([speed],[callback]); 淡出
3.把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
$(selector).fadeTo(([[speed],opacity,[easing],[fn]])
opacity:一个0至1之间表示透明度的数字。
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。返回值:jQuery fadeToggle([speed,[easing],[fn]])
8.改变元素高度
slideUp() 元素从下到上缩短直至隐藏,语法: $(selector).slideUp([speed],[callback])
slideDown() 元素从上到下延伸显示 语法:$(selector0.slideDowm([speed],[callback]);