元素绝对位置和鼠标移入移出和 input框事件

最新推荐文章于 2025-05-27 16:07:58 发布

原创最新推荐文章于 2025-05-27 16:07:58 发布 · 1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#元素绝对位置和鼠标移入移出和 input框事件

前端专栏收录该内容

39 篇文章

订阅专栏

本文探讨了如何获取元素的绝对位置，详细解释了鼠标移入移出事件的实现，并深入研究了input框的相关事件处理。通过实例解析，帮助读者掌握这些基本但重要的前端开发技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素绝对位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素绝对位置</title>
	<style type="text/css">
		.con{
			width: 600px;
			height: 600px;
			margin: 50px auto 0;
		}
		.box{
			width: 100px;
			height: 100px;
			background-color: gold;
			margin-bottom: 10px;
		}
		.pos{
			margin-left: 500px;
		}
		.pop{
			width: 100px;
			height: 100px;
			background-color: red;
			position: fixed;
			left:0;
			top: 0;
			display: none;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $pos = $('.pos');
			//offset()是获取相对于页面左上角的绝对位置，即使外面再包一层con居中层，也不影响效果
			var pos = $pos.offset();
			// console.log(pos);
			// alert(pos.left + "," + pos.top);
			var w = $pos.outerWidth();
			var h = $pos.outerHeight();
			// alert(w);

			$('.pop').css({left:pos.left + w,top:pos.top});

			$pos.mouseover(function() {
				$('.pop').show();
			});
			$pos.mouseout(function() {
				$('.pop').hide();
			});
		})
	</script>
</head>
<body>
	<div class="con">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box pos"></div>
		<div class="box"></div>
	</div>

	<div class="pop">提示信息！</div>
</body>
</html>

鼠标移入移出

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标移入移出</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: gold;
			margin: 100px auto 0;
		}
		.son{
			width: 100px;
			height: 100px;
			background-color: green;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			/*进入子元素也触发*/
			/*$('#div1').mouseover(function() {
				$(this).animate({marginTop: 50});//.stop()
			});
			$('#div1').mouseout(function() {
				$(this).animate({marginTop: 100});//.stop()
			});*/

			/*进入子元素不触发*/
			/*$('#div1').mouseenter(function() {
				$(this).stop().animate({marginTop: 50});//
			});
			$('#div1').mouseleave(function() {
				$(this).stop().animate({marginTop: 100});//
			});*/

			/*通过hover（mouseenter+mouseleave）实现简写*/
			$('#div1').hover(function() {
				$(this).stop().animate({marginTop: 50});
			}, function() {
				$(this).stop().animate({marginTop: 100});
			});
		})
	</script>
</head>
<body>
	<div id="div1" class="box">
		<div class="son"></div>
	</div>
</body>
</html>

input框事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>input框事件</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// //一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件属性）
			// $('#txt01').focus();

			// //文本框获取焦点的时候（有光标闪烁的时候）
			// $('#txt01').focus(function() {
			// 	alert('focus');
			// });

			// //失去焦点的时候（光标离开的时候）
			// $('#txt01').blur(function() {
			// 	alert('blur');
			// });

			// //输入框内容发生变化的时候，失去焦点后触发，可用于注册时验证用户名是否已存在
			// $('#txt01').change(function() {
			// 	alert('change');
			// });

			//松开键盘按键就触发
			$('#txt01').keyup(function() {
				alert('keyup');
			});
		})
	</script>
</head>
<body>
	<input type="text" id="txt01">
</body>
</html>