摘要：<!DOCTYPE html /><html> <head> <meta charset="utf-8" /> <title>jquery事件方法</title>
<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
<title>jquery事件方法</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{
width:100px;
height:100px;
background:#eee;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#one').focus(function(){ //当元素获得焦点时
$('#one').css('background','blue')
})
$('#one').blur(function(){ //当元素失去焦点时
$('#one').css('background','red')
})
$('#tw').change(function(){ //当元素的值发生改变时
$('#tw').css('background','#ccc')
})
$('#cl').click(function(){ //当元素被单击时
$('#one').css('width','250px')
})
$('#dbl').dblclick(function(){ //当元素被双击时
$('#tw').css('height','50px')
})
$('div').mouseover(function(){ //当鼠标在元素上方时
$('div').css('background','red')
})
$('div').mouseout(function(){ //当鼠标离开元素上方时
$('div').css('background','blue')
})
$('div').mouseup(function(){ //当鼠标在元素上方松开时
$('div').css('background','pink')
})
$('div').mousedown(function(){ //当鼠标在元素上方按下时
$('div').css('background','green')
})
$('#tt').mouseenter(function(){ //当鼠标穿过元素时
$('#tt').css('color','red')
})
$('#tt').mousemove(function(){ //当鼠标在元素中移动时
$('#tt').css('background','grey')
})
a=0
$(window).resize(function(){ //当窗口进行调整时，返回调整次数
$('h5').text(a++)
<!-- alert('fjakj ') -->
})
$(document).mouseover(function(aa){ //返回鼠标在文档中距离左边与上边的位置
$('span').text('x:'+aa.pageX+'Y:'+aa.pageY)
})
$('#ss').hover( //当鼠标移上/移除元素时进行切换
function(){
$('#ss').css('background','red')
},function(){
$('#ss').css('background','blue')
}
)
$('#ii').click(function(){ //对元素进行显示/隐藏切换
$('#rr').toggle().css('color','pink')
})
})
</script>
<input type="text" id="one" />
<br>
<input type="text" id="tw" />
<br>
<button id="cl">click</button>
<br>
<button id="dbl">dblclick</button>
<hr />
<div>阿斯蒂芬那里风景</div>
<br>
<p id="tt">阿斯蒂芬那里风景</p>
<br>
<h5></h5>
<span></span>
<br><br><br>
<a id="ss">esdfasdffasdfaf</a>
<br><br><br>
<h1 id="rr">hskdfalsdjasl</h1>
<button id="ii">click</button>
</body>
</html>
批改老师：查无此人批改时间：2019-03-09 09:15:55
老师总结：完成的不错。js代码，每行语句后面增加;号，养成好习惯。继续就加油。
