jq事件api
1.点击事件 click()、dbclick()
2.焦点事件 focus()、blur()
3.改变事件 change()
4.选择事件 select()
5.表单提交事件 submit()
6.鼠标事件
鼠标针对对象事件 mousedown()、mouseup()、mouseover()、mouseout()
事件对象事件 mousemove()
鼠标子元素事件（不冒泡） mouseenter()、mouseleave()
7.窗口事件 resize()
8.键盘事件 keydown()、keyup()
案例：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
line-height: 200px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<button class="click">点击事件</button>
<button class="dbclick">双点击事件</button>
<div class="box">
<p>https://blog.csdn.net/muzidigbig</p>
</div>
<p>你既然认准一条道路，何必去打听要走多久。</p>
<form action="#" method="get">
<p>焦点事件：<input type="text" value="muzidagbig"></p>
<P><input type="file"></P>
<p><input type="submit" value="提交"></p>
</form>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//1.页面载入事件，入口函数ready()
$(document).ready(function () {
//2.点击事件
$('.click').click(function () {
$('.box').hide(2000,function () {
console.log('点击事件结束！');
});
});
//3.双点击事件
$('.dbclick').dblclick(function () {
$('.box').show(2000,function () {
console.log('双点击事件结束！');
});
});
//4.获得焦点事件
$('input[type=text]').focus(function () {
console.log('获取焦点事件结束！');
});
//5.失去焦点事件
$('input[type=text]').blur(function () {
console.log('失去焦点事件结束！');
});
//6.改变事件;文本内容改变时触发
$('input[type=text]').change(function () {
console.log('改变事件结束！');
});
//7.选择事件
$('input[type=text]').select(function () {
$('input[type=text]').after("输入有误！")
});
//8.form表单提交使劲按；但是表单中应该有type='submit'按钮
$('form').submit(function () {
console.log('表单已提交！');
});
//9.鼠标放在元素上点击后触发
$('.box').mousedown(function () {
console.log('鼠标放在元素上点击后触发！');
});
//10.mouseup事件会在鼠标点击对象释放时
$('.box').mouseup(function () {
$('.box').fadeOut(2000).delay(1000).fadeIn(2000);
});
//11.mouseover事件会在鼠标移入对象时触发
$('.box').mouseover(function () {
$('.box').fadeTo(2000,.5);
});
//12.mouseout事件在鼠标从元素上离开后会触发
$('.box').mouseout(function () {
console.log('我离开了！')
});
//13.mousemove 事件通过鼠标在元素上移动来触发。
//事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标
$('.box').mousemove(function (ev) {
console.log('clientX:'+ev.clientX+'clientY:'+ev.clientY)
});
//14.mouseenter()与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
//如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
$('.box').mouseenter(function () {
console.log('mouseenter 穿过事件')
});
//15.mouseleave()与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
//如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
$('.box').mouseleave(function () {
console.log('mouseleave 离开事件')
});
//16.窗口事件resize([[data],fn]) 窗口改变时触发
$(window).resize(function () {
console.log('window窗口已发生变化！')
});
//17.unload([[data],fn])只应用于 window 对象。
// $(window).unload(function () {
// alert("Bye now!");
// });
})
</script>
</html>
键盘事件：keydown()/keyup()
案例：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
padding: 50px 0;
background-color: pink;
cursor: pointer;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<p>https://blog.csdn.net/muzidigbig</p>
</div>
<p>你既然认准一条道路，何必去打听要走多久。</p>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
var num = 1;
console.log('初始num：'+num);
$(document).keydown(function (event) {
console.log(event.keyCode);
var key = event.keyCode;
if(key == 38){
num += 1;
console.log('num加1：'+num);
}else if(key == 40){
num -= 1;
console.log('num减1：'+num);
if(num < 0 | num ==0){
num = 0;
alert('已经减到最底层不能再减了！呵呵呵……bye');
}
}
});
</script>
</html>
若有不足请多多指教！希望给您带来帮助！
![用jQuery实现一个简易的聊天框[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)