1、jQuery事件是对JavaScript事件的封装,常用事件分类
基础事件:
复合事件:
2、常用的鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件!
方法 |
描述 |
执行时机 |
click( ) |
触发或将函数绑定到指定元素的click事件 |
单击鼠标时 |
mouseover( ) |
触发或将函数绑定到指定元素的mouseover事件 |
鼠标指针移过时 |
mouseout( ) |
触发或将函数绑定到指定元素的mouseout事件 |
鼠标指针移出时 |
mouseenter( ) |
触发或将函数绑定到指定元素的mouseenter事件 |
鼠标指针进入时 |
mouseleave( ) |
触发或将函数绑定到指定元素的mouseleave事件 |
鼠标指针离开时 |
mouseover( ) 与mouseout( )方法:
$(".top .on").mouseover(function(){
//鼠标移入,显示
$(".top .on .topDown").show("slow");
});
$(".top .on").mouseout(function(){
//鼠标移除,隐藏效果
$(".top .on .topDown").hide("fast");
});
鼠标事件方法的区别:
方法 |
相同点 |
不同点 |
mouseover( ) |
鼠标进入被选元素时会触发 |
鼠标在其被选元素的子元素上来回进入时: 触发mouseover( ) 不触发mouseenter |
mouseenter( ) |
||
mouseout( ) |
鼠标离开被选元素时会触发 |
鼠标在其被选元素的子元素上来回离开时: 触发mouseout 不触发mouseleave |
mouseleave( ) |
3、键盘事件
方法 |
描述 |
执行时机 |
keydown( ) |
触发或将函数绑定到指定元素的keydown事件 |
按下键盘时 |
keyup( ) |
触发或将函数绑定到指定元素的keyup事件 |
释放按键时 |
keypress( ) |
触发或将函数绑定到指定元素的keypress事件 |
产生可打印的字符时 |
代码如下:
$("[type=password]").keyup(function () { //键盘释放时触发
$("#events").append("keyup");
}).keydown(function (e) { //按下键盘时触发
$("#events").append("keydown");
}).keypress(function () { //输入字符时触发
$("#events").append("keypress");
});
$(document).keydown(function (event) {
if (event.keyCode == "13") { //keyCode==13代表按下回车
alert("确认要提交么?");
}
});
4、浏览器事件
$(selector).resize( );
//注释:主要是调整浏览器窗口大小
5、事件的绑定和移除
绑定:bind() , on();
移除:unbind(),off();
一般都会用on(),off()事件。在对元素操作时,可以对新增的元素有效。
代码如下:
$(document).ready(function () {
//绑定事件 on是绑定事件,off是解绑事件
$("#nav li").on(
//给点击事件命名
"click", bg = function () {
//拿到当前的li的下标
var index = $("#nav li").index(this);
if (index == 0) {
//1.让父级盒子背景发生改变
$(".taskContent").css("background", "#26a6e3");
} else {
$(".taskContent").css("background", "#ff9400");
}
}
).on( //有多个绑定事件,在后面直接链接.on
"click", content = function () {
var index = $("#nav li").index(this);
//2.让对应的ul显示,其他的ul隐藏
//先让所有的ul隐藏,再让对应(index下标)的ul显示
$(".taskContent ul").hide();
$(".taskContent ul:eq(" + index + ")").show();
}
);
//点击事件
$("#del").click(function () {
//解除指定绑定的事件
$("#nav li").off("click",content);
//解除所有的绑定事件
// $("#nav li").off();
});
});
6、复合事件
hover()方法:相当于mouseover事件和mouseout事件的结合。
代码如下:
$(".top-m .on").hover(
//移入时触发
function(){
$(".topDown").show();
},
//移除时触发
function(){
$(".topDown").hide();
}
);
toggle()方法:相当于鼠标连续点击事件
语法:
toggle(fn1,fn2,...,fnN);
//里面可以放入多个函数
toggle()方法不带参数,与show( )和hide( )方法作用一样,第一次点击显示,第二次点击隐藏
$("input").click(function(){
$("p").toggle();}
)
//注释:连续点击input标签,显示和隐藏p标签
toggleClass()方法:可以对样式进行操作。
$("input").click(function(){
$("p").toggleClass("red");
});
//注释:当点击input标签的时候,将p标签的样式修改
toggle( )和toggleClass( )的总结:
toggle( fn1,fn2...) 实现单击事件的切换,无须额外绑定click事件
toggle( )实现事件触发对象在显示和隐藏状态之间切换
toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换
7、jQuery动画
在jQuery里面有很多的动画效果:
show() 控制元素的显示,hide( )控制元素的隐藏
代码如下:
//显示:speed是时间,callback是show函数执行完后要执行的函数,这两个参数都是可选的
$(selector).show([speed],[callback]);
//隐藏
$(selector).hide([speed],[callback]);
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
代码如下:
//fadeIn()淡入:speed是设置时间,callback是执行完fadeIn要执行的函数
$(selector).fadeIn([speed],[callback]);
//fadeOut()淡出:speed是设置时间,callback是执行完fadeIn要执行的函数
$(selector).fadeOut([speed],[callback]);
//注意:speed和callback这两个参数都是可选的
slideDown() 可以使元素下拉显示 ,slideUp()则使元素上升直至隐藏
//slideDown()延伸显示,里面的参数可选,speed是时间,callback是执行完slideDown再执行
$(selector).slideDown ([speed],[callback]);
//slideUp()上升隐藏,里面的参数可选,speed是时间,callback是执行完slideDown再执行
$(selector).slideUp ([speed],[callback]);
自定义动画
$(selector). animate({params},speed,callback);
//{params}是定义形成动画的属性,必须要写上,speed是时间,callback是执行完animate再执行,后两个是可选