目录
1、什么是事件?
- 面对不同访问者的响应叫做事件
2、JQuery事件集合
①、click()
- 该函数在用户点击HTML元素时执行
②、dblclick()
- 当双击元素时,会发生dblclick事件
③、mouseenter()
- 当鼠标指针穿过元素时,会发生mouseenter()事件
④、mouseleave()
- 当鼠标指针离开元素时,会发生mouseleave()事件
⑤、mousedown()
- 当鼠标指针移动到元素上方,点击鼠标按钮,触发mousedown()事件
⑥、mouseup()
- 当松开鼠标按钮时,触发mouseup()事件
⑦、hover()
- 用于模拟光标悬停事件
⑧、focus()
- 当元素获得焦点时,发生focus事件
⑨、blur()
- 当元素失去焦点时,发生blur事件
// 综合实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery事件学习</title>
<style type="text/css">
#div01,#div02,#div03,#div04{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
span
{
display:none;
}
</style>
</head>
<body>
<div>
<h3>1.click事件 与 dblclick事件</h3>
<p>click是元素的单击事件,dblclick是元素的双击事件</p>
<hr />
<p>
实例:当鼠标单击方块时,方块变成浅绿色;<br>
当鼠标双击方块时,方块变成浅蓝色。
</p>
<div>
<div id="div01" ></div>
</div>
<hr />
<h3>2.mouseenter事件 与 mouseleave事件</h3>
<p>
mouseenter是鼠标进入某个元素时触发的事件;<br>
mouseleave是鼠标离开某个元素时触发的事件。
</p>
<hr />
<div>
<p>
实例:当鼠标移动到div02时,方块变成浅绿色;<br>
当鼠标移出div02时,颜色变回红色。
</p>
<div id="div02" ></div>
</div>
<hr />
<h3>3.mouseup事件 与 mousedown事件</h3>
<p>
mousedown是鼠标按下时触发的事件;
mouseup是鼠标松开时触发的事件;
</p>
<hr />
<div>
<p>
实例:当鼠标按下时,div03变成浅绿色;<br>
当鼠标松开时,颜色变回原色。
</p>
<div id="div03" ></div>
</div>
<hr />
<h3>4.hover事件</h3>
<p>
hover事件等同于mouseleave和mouseenter两个事件的综合体
基本语法:$(选择器).hover(function(){},function(){});
注:hover的第一个function参数为mouseenter的回发事件;第二个function参数为mouseleave的回发事件
</p>
<hr />
<div>
<p>
实例:当鼠标移动到div04时,方块变成浅绿色;<br>
当鼠标移出div04时,颜色变回原色。
</p>
<div id="div04" ></div>
</div>
<hr />
<h3>5.focus事件 与 blur事件</h3>
<p>
focus事件某元素获取鼠标焦点的事件,blur事件某元素失去鼠标焦点的事件。
</p>
<hr />
<div>
<p>
实例:当鼠标移动到div04时,方块变成浅绿色;<br>
当鼠标移出div04时,颜色变回红色。
</p>
<input id="input1" type="text" width="200px" height="20px" step="1">
<span>请输入你的电话号码?</span><br>
<input id="input2" type="text" width="200px" height="20px" step="2">
</div>
</div>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script>
// 单击事件
$("#div01").click(function(){
$(this).css("background-color","lawngreen");
});
// 双击事件
$("#div01").dblclick(function(){
$(this).css("background-color","cornflowerblue");
});
// mouseenter事件
$("#div02").mouseenter(function(){
$(this).css("background-color","lawngreen");
});
// mouseleave事件
$("#div02").mouseleave(function(){
$(this).css("background-color","red");
});
// mousedown事件
$("#div03").mousedown(function(){
$(this).css("background-color","lawngreen");
});
// mouseup事件
$("#div03").mouseup(function(){
$(this).css("background-color","antiquewhite");
});
// hover事件
$("#div04").hover(function(){
$(this).css("background-color","lawngreen");
},function (){
$(this).css("background-color","antiquewhite");
});
// focus事件
$("#input1,#input2").focus(function(){
$(this).css("width","300px");
$("span").css("display","inline").fadeOut(2000);
$(this).css("height","30px");
});
// blur事件
$("#input1,#input2").blur(function(){
$(this).css("width","200px");
$(this).css("height","20px");
});
</script>
</body>
</html>
实例图: