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=)