????:總結(jié):自我感覺本章的事件還是很有作用,以前很想做一個輸入框完成輸入后右側(cè)有提示現(xiàn)在能實現(xiàn)了。作業(yè)中我自己做了一下。作業(yè)沒有按照老師的方式做,知識點都涵蓋了,但是我做的是我自己想做的效果,哈哈。老師有興趣可以看看喲。老師推薦的《JavaScript高級編程》很早就買了,在書柜里睡了有一年多了。建議:老師的點評字數(shù)超過一定后我們是看不到的,建議在點開作業(yè)的詳細內(nèi)容頁面中加入老師點評,并完整顯示。老師的
總結(jié):
自我感覺本章的事件還是很有作用,以前很想做一個輸入框完成輸入后右側(cè)有提示現(xiàn)在能實現(xiàn)了。作業(yè)中我自己做了一下。作業(yè)沒有按照老師的方式做,知識點都涵蓋了,但是我做的是我自己想做的效果,哈哈。老師有興趣可以看看喲。老師推薦的《JavaScript高級編程》很早就買了,在書柜里睡了有一年多了。
建議:
老師的點評字數(shù)超過一定后我們是看不到的,建議在點開作業(yè)的詳細內(nèi)容頁面中加入老師點評,并完整顯示。
老師的點評能夠讓我們繼續(xù)留言答復(fù)。當然,這個就不強制要求需要老師再去看,有空看看增加點互動。
作業(yè):
<!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>