jQuery事件

 

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。