请老师查阅俺的作业效果，看还满意不
总结：
自我感觉本章的事件还是很有作用，以前很想做一个输入框完成输入后右侧有提示现在能实现了。作业中我自己做了一下。作业没有按照老师的方式做，知识点都涵盖了，但是我做的是我自己想做的效果，哈哈。老师有兴趣可以看看哟。老师推荐的《JavaScript高级编程》很早就买了，在书柜里睡了有一年多了。
建议：
老师的点评字数超过一定后我们是看不到的，建议在点开作业的详细内容页面中加入老师点评，并完整显示。
老师的点评能够让我们继续留言答复。当然，这个就不强制要求需要老师再去看，有空看看增加点互动。
作业：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq事件</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
span{
color:red;
}
input,button{
margin: 20px 5px;
height: 30px;
width:200px;
border:1px solid #1495E7;
}
#div1,#div2{
height: 100px;
width: 100px;
border: 1px solid #1495E7;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('input').focus(function(){
$(this).css('background-color','#E9F2FB')
})
$('input').blur(function(){
$(this).css('background-color','#fff')
})
$('#text1').change(function(){
$('#span1').text('√')
$('#span1').css('color','#1495E7')
})
$('#text2').change(function(){
$('#span2').text('√')
$('#span2').css('color','#1495E7')
})
$('button').click(function(){
alert('你已成功提交')
})
$('#div1').dblclick(function(){
$('#div1').css('background-color','red')
$('#div1_p').css('color','#fff')
$('#div1_p').text('我生气了')
})
//以下可以通过去掉li前面的#，然后逐一添加#进行效果测试
$('#div2').mouseover(function(){
$('#li_over').css('color','red')
})
$('#div2').mouseenter(function(){
$('#li_enter').css('color','red')
})
$('#div2').mousemove(function(){
$('#li_move').css('color','red')
})
$('#div2').mouseleave(function(){
$('#li_leave').css('color','red')
})
$('#div2').mouseout(function(){
$('#li_out').css('color','red')
})
$('#div2').mousedown(function(){
$('#li_down').css('color','red')
})
$('#div2').mouseup(function(){
$('#li_up').css('color','red')
})
$(document).mousemove(function(aa){
$('#span_xy').text('X: '+aa.pageX+'Y: '+aa.pageY)
})
})
</script>
<label for="text1">用户名：</label><input type="text" name="" id="text1"><span id="span1">x</span><br>
<label for="text2">手机号：</label><input type="text" name="" id="text2"><span id="span2">x</span><br>
<button>提交</button><br>
<div id="div1"><p id="div1_p">敢点我两下我就跟你红脸</p></div><br>
<div id="div2"></div>
<ol>
<li id="li_over">mouseover</li>
<li id="li_enter">mouseenter</li>
<li id="li_move">mousemove</li>
<li id="li_leave">mouseleave</li>
<li id="li_out">mouseout</li>
<li id="li_down">mousedown</li>
<li id="li_up">mouseup</li>
<li id="li_xy">当前鼠标的位置为：<span id="span_xy"></span></li>
</ol>
</body>
</html>