摘要：<!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");
});//獲得焦點(diǎn)時(shí)改變input背景顏色為pink
$("input").blur(function(){
$("input").css("background-color","red");
});//失去焦點(diǎn)時(shí)改變input背景顏色為red
$(".btn").click(function(){
$("p").fadeToggle();
});//點(diǎn)擊button時(shí)p標(biāo)簽淡出淡入
$(".cha").change(function(){
$(this).css("background-color","#ccc");
});//當(dāng)option內(nèi)容改變時(shí)背景顏色變化
$(".dbldiv").dblclick(function(){
$(this).css('background','pink')
});//雙擊div時(shí)改變背景顏色
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});//鼠標(biāo)移到p標(biāo)簽上時(shí)改變背景顏色
$("p").mouseout(function(){
$("p").css("background-color","#ccc");
});//鼠標(biāo)移開(kāi)p標(biāo)簽上時(shí)改變背景顏色
x=0;
$(".enter").mouseenter(function(){
$(".enter span").text(x+=1);
});//鼠標(biāo)移上時(shí)，x+1
$(".enter").mouseleave(function(){
$(".enter span").text(x-=1);
});//鼠標(biāo)移開(kāi)時(shí)，x-1
$(".move").mousemove(function(move){
$('.move span').text('x: '+move.pageX+'y: '+move.pageY);
});//獲取鼠標(biāo)移動(dòng)時(shí)候的坐標(biāo)
$(".down").mousedown(function(){
$(this).after("按下鼠標(biāo)"+"<br>");
});//鼠標(biāo)按下輸出"按下"
$(".down").mouseup(function(){
$(this).after("松開(kāi)鼠標(biāo)"+"<br>");
});//鼠標(biāo)松開(kāi)輸出"松開(kāi)"
a=0;
$(window).resize(function(){
$('.size span').text(a+=1)
});//對(duì)瀏覽器窗口調(diào)整大小計(jì)數(shù)
})
</script>
<input type="text" /><br>
<p>jquery的事件函數(shù)</p>
<button class="btn">點(diǎn)擊</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">當(dāng)前鼠標(biāo)的坐標(biāo)：<span> </span></div><br>
<button class="down">按下和松開(kāi)</button><br>
<div class="size">
頁(yè)面被調(diào)整大小的次數(shù)：<span></span>
</div>
</body>
</html>ready()可以說(shuō)是總事件的開(kāi)始，當(dāng)打開(kāi)頁(yè)面時(shí)，最開(kāi)始加載的事件就是ready()；
focus()和blur()通常會(huì)一起使用，focus為獲得焦點(diǎn)時(shí)，blur是失去焦點(diǎn)時(shí)；
click()和dblclick()，click是鼠標(biāo)單擊后的事件，dblclick是鼠標(biāo)雙擊時(shí)的事件，使用時(shí)的根據(jù)需求不同具體使用；
change()是當(dāng)值或者內(nèi)容發(fā)生改變后的事件，比如下拉框，選擇不同內(nèi)容則change對(duì)應(yīng)的事件觸發(fā)；
mouseover()和mouseout()也會(huì)一起使用，當(dāng)鼠標(biāo)移上和移開(kāi)時(shí)觸發(fā)的事件；
mouseenter()和mouseleave()和上面的類似，都是鼠標(biāo)移上和移開(kāi)時(shí)觸發(fā)的事件，不同的是，比如A元素中還有B元素，當(dāng)鼠標(biāo)穿過(guò)A、B元素時(shí)都會(huì)觸發(fā)mouseover也就是觸發(fā)兩次，而mouseenter只會(huì)觸發(fā)一次；
mousemove()是鼠標(biāo)在元素內(nèi)移動(dòng)時(shí)觸發(fā)，類似于在地圖中尋找點(diǎn)的時(shí)候，使用mousemove事件；可以和pageX()、pageY()共同使用，以達(dá)到定位的效果；
mousedown()和mouseup()是鼠標(biāo)按下和松開(kāi)時(shí)觸發(fā)；
resize()是改變?cè)卮笮r(shí)候觸發(fā)；