<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
200px;
height: 200px;
background-color: red;
}
.box{
100px;
height: 40px;
background-color: yellow;
position: relative;
}
.box .content{
position: absolute;
200px;
height: 200px;
top: 40px;
background-color: blue;
display: none;
}
</style>
</head>
<body>
<div id="box">
<p style="background: green">小马哥</p>
</div>
<div class="box">
<div class="content"></div>
</div>
<input type="text">
<script src="./jquery-3.5.1.js"></script>
<script>
$(function () {
// 1.click 单击
// $('#box').click(function () {
// //先1秒隐藏，再弹出
// $(this).hide(1000,function () {
// alert($(this).text())
// })
// })
//2.dblclick 双击
// $('#box').dblclick(function () {
// alert('双击了')
// })
//3.mousedown 鼠标摁下
$('#box').mousedown(function () {
console.log('鼠标摁下了')
})
//4.mouseup 鼠标抬起
$('#box').mouseup(function () {
console.log('鼠标抬起来了')
})
//5.mousemove 鼠标移动了
$('#box').mousemove(function () {
console.log('鼠标移动了')
})
//6,mouseover 鼠标穿过被选元素或者当前被选的子元素
$('#box').mouseover(function () {
console.log('鼠标穿过了')
})
$('#box').mouseout(function () {
console.log('鼠标离开了')
})
//盒子隐藏，通过穿过父元素，显示出来
// $('.box').mouseover(function () {
// console.log(11111)
// $('.content').show();
// })
// $('.box').mouseout(function () {
// $('.content').hide();
// })
//*7.mouseenter mouseleave 鼠标只穿过悬浮或者离开父级元素，才执行
//和上面对比 console.log(11111) 鼠标穿过子元素不会执行了
$('.box').mouseenter(function () {
console.log(11111)
//使用动画的时候 先要停止动画 再开启动画
$('.content').stop().slideDown(500);
})
$('.box').mouseleave(function () {
$('.content').stop().slideUp(500);
})
//fouse 聚焦
$('input[type=text]').focus(function () {
console.log('获取焦点了')
});
//fouse 失焦
$('input[type=text]').blur(function () {
console.log('失去焦点了')
});
//使用户无法使用文本框
$('input[type=text]').blur(function () {
this.blur();
});
//keydown 键盘摁下了
$(window).keydown(function (event) {
console.log('键盘按下了')
//按键对应的号码
console.log(event.keyCode)
//空格 32 enter 13 esc 27 不同的按键做不同的事情
switch (event.keyCode) {
case 32:
//摁下空格键
console.log('空格键触发了');
break;
case 13:
//摁下回车键
console.log('回车键触发了');
break;
default:
console.log('其他键触发了');
break;
}
})
})
</script>
</body>
</html>