<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery之位置操作</title>
<script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
<!--
val():获取或设置元素的value值
size():获取元素的长度。类似于length
each():循环,第一个参数是下标,第二个参数是对应的每个元素
-->
<style type="text/css">
*{margin: 0px;padding: 0px;}
#div1{width: 200px;height: 200px;background: red;overflow: hidden;margin: 20px;}
#div2{width: 100px;height: 100px;background: yellow;margin: 30px;}
</style>
<script type="text/javascript">
$(function(){
//div2.offsetLeft,如果父级没有定位就是div2到屏幕最左侧的距离,如果有定位则是到父级定位的距离
alert($('#div2').offset().left);//offset().left获得到屏幕左侧的距离offset().top获得到屏幕上端的距离(offset()有两个属性)
alert($('#div2').position().left)//position().left到有定位的父级的left值,把当前元素转化为类似定位的形式(position()有两个属性)
$('#div2').parent().css('background','blue')
// parent():获取父级元素,用来做些什么.
$('#div2').offsetparent().css('background','blue')
// offsetParent():获取有定位的父级
$('li').each(function(i,elem){
$(elem).html(i);//0 1 2 3
})
})
</script>
</head>
<body>
<!-- <div id="div1">
<div id="div2" ></div>
</div> -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
jQuery之位置操作
最新推荐文章于 2023-04-09 10:05:41 发布