1、回顾事件三要素
1、事件源
2、事件类型
3、事件处理程序
2、Js中this与jquery中this区别
Js:this.css(“background-color”,“red”)
Jquery:$(this).css(“background-color”,“red”)
3、鼠标事件
1、单击事件
$("p").click(function(){
// 动作触发后执行的代码!!
});
2、双击事件
$("p").dblclick(function(){
$(this).hide();
})
3、鼠标进入
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
$("#p1").mouseover(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
4、鼠标离开
$("#p1").mouseleave(function(){
alert("再见,您的鼠标离开了该段落。");
});
$("#p1").mouseout(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
5、获取焦点
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
6、失去焦点
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
4、键盘事件
1、键盘按下
$("input").keydown(function(){
$(this).css("background-color","#cccccc");
});
2、键盘抬起
$("input").keyup(function(){
$(this).css("background-color","#ffffff");
});
注意:一句代码中,要么全是js要么全是jQuery。