abstrakt：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery的事件函數(shù)</title> <script type="text/javascript" src=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery的事件函數(shù)</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","pink");
});//獲得焦點時改變input背景顏色為pink
$("input").blur(function(){
$("input").css("background-color","red");
});//失去焦點時改變input背景顏色為red
$(".btn").click(function(){
$("p").fadeToggle();
});//點擊button時p標簽淡出淡入
$(".cha").change(function(){
$(this).css("background-color","#ccc");
});//當option內容改變時背景顏色變化
$(".dbldiv").dblclick(function(){
$(this).css('background','pink')
});//雙擊div時改變背景顏色
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});//鼠標移到p標簽上時改變背景顏色
$("p").mouseout(function(){
$("p").css("background-color","#ccc");
});//鼠標移開p標簽上時改變背景顏色
x=0;
$(".enter").mouseenter(function(){
$(".enter span").text(x+=1);
});//鼠標移上時，x+1
$(".enter").mouseleave(function(){
$(".enter span").text(x-=1);
});//鼠標移開時，x-1
$(".move").mousemove(function(move){
$('.move span').text('x: '+move.pageX+'y: '+move.pageY);
});//獲取鼠標移動時候的坐標
$(".down").mousedown(function(){
$(this).after("按下鼠標"+"<br>");
});//鼠標按下輸出"按下"
$(".down").mouseup(function(){
$(this).after("松開鼠標"+"<br>");
});//鼠標松開輸出"松開"
a=0;
$(window).resize(function(){
$('.size span').text(a+=1)
});//對瀏覽器窗口調整大小計數(shù)
})
</script>
<input type="text" /><br>
<p>jquery的事件函數(shù)</p>
<button class="btn">點擊</button><br>
<select class="cha" name="">
<option value="a1">蘋果</option>
<option value="a2">橘子</option>
<option value="a3">香蕉</option>
</select><br>
<div style="width:100px;height:100px;background-color:#ccc" class="dbldiv"></div><br>
<div class="enter" style="width:100px;height:50px;background-color:#ccc;">
<h1><span></span></h1>
</div><br>
<div class="move">當前鼠標的坐標：<span> </span></div><br>
<button class="down">按下和松開</button><br>
<div class="size">
頁面被調整大小的次數(shù)：<span></span>
</div>
</body>
</html>ready()可以說是總事件的開始，當打開頁面時，最開始加載的事件就是ready()；
focus()和blur()通常會一起使用，focus為獲得焦點時，blur是失去焦點時；
click()和dblclick()，click是鼠標單擊后的事件，dblclick是鼠標雙擊時的事件，使用時的根據(jù)需求不同具體使用；
change()是當值或者內容發(fā)生改變后的事件，比如下拉框，選擇不同內容則change對應的事件觸發(fā)；
mouseover()和mouseout()也會一起使用，當鼠標移上和移開時觸發(fā)的事件；
mouseenter()和mouseleave()和上面的類似，都是鼠標移上和移開時觸發(fā)的事件，不同的是，比如A元素中還有B元素，當鼠標穿過A、B元素時都會觸發(fā)mouseover也就是觸發(fā)兩次，而mouseenter只會觸發(fā)一次；
mousemove()是鼠標在元素內移動時觸發(fā)，類似于在地圖中尋找點的時候，使用mousemove事件；可以和pageX()、pageY()共同使用，以達到定位的效果；
mousedown()和mouseup()是鼠標按下和松開時觸發(fā)；
resize()是改變元素大小時候觸發(fā)；