摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery的事件函数</title> <script type="text/javascript" src=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery的事件函数</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)
});//对浏览器窗口调整大小计数
})
</script>
<input type="text" /><br>
<p>jquery的事件函数</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">
页面被调整大小的次数：<span></span>
</div>
</body>
</html>ready()可以说是总事件的开始，当打开页面时，最开始加载的事件就是ready()；
focus()和blur()通常会一起使用，focus为获得焦点时，blur是失去焦点时；
click()和dblclick()，click是鼠标单击后的事件，dblclick是鼠标双击时的事件，使用时的根据需求不同具体使用；
change()是当值或者内容发生改变后的事件，比如下拉框，选择不同内容则change对应的事件触发；
mouseover()和mouseout()也会一起使用，当鼠标移上和移开时触发的事件；
mouseenter()和mouseleave()和上面的类似，都是鼠标移上和移开时触发的事件，不同的是，比如A元素中还有B元素，当鼠标穿过A、B元素时都会触发mouseover也就是触发两次，而mouseenter只会触发一次；
mousemove()是鼠标在元素内移动时触发，类似于在地图中寻找点的时候，使用mousemove事件；可以和pageX()、pageY()共同使用，以达到定位的效果；
mousedown()和mouseup()是鼠标按下和松开时触发；
resize()是改变元素大小时候触发；
