jq的事件调用

原创 2018-11-10 23:08:24 3
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>jq的事件</title>
		<style type="text/css">
			div{
				width:200px;
				height:200px;
				background:pink;
				text-align: center;
				margin: 20px auto;
			}
		</style>
		<script src="../jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				// .hover(over,out)  //鼠标移出移进的事件
				$('div').hover(
					function(){
						$(this).css({
							'border':'2px solid #999',
							'borderRadius':'15px',
							'box-shadow':'2px 2px 15px #999',
							'color':'#fff',
							'fontweight':'bold'
						})
					},
					function(){
						$(this).css({
							'border':'none',
							'borderRadius':'0px',
							'box-shadow':'none',
							'color':'#000',
							'fontweight':'400'
						})
					}
				)
				
				$(document).mousemove(function(aa){
					$('span').text('当前鼠标位置为X:'+aa.pageX+","+"y:"+aa.pageY);
				})
			})
		</script>
	</head>
	<body>
		<div>移动到该元素上<br><span></span></div>
	</body>
</html>


批改老师:灭绝师太批改时间:2018-11-11 09:28:36
老师总结:练习的比较全面,继续保持,必要的时候,要带上笔记和备注

发布手记

热门词条