jQuery | position() 与示例

简介

position()是jQuery中的一个方法，它用于获取元素相对于父元素的位置信息。该方法返回一个包含两个属性的JavaScript对象：top和left，分别表示元素相对于父元素顶部和左侧的距离。

语法

$(selector).position()

参数：

• selector：一个字符串，表示要获取位置信息的元素的选择器表达式。
• 返回值：一个JavaScript对象，包含top和left属性，分别表示相对于父元素的顶部和左侧距离。

示例

HTML结构

<div class="parent">
  <div class="child"></div>
</div>

CSS样式

.parent {
  width: 200px;
  height: 200px;
  background-color: #eee;
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: #f00;
  position: absolute;
  top: 50px;
  left: 50px;
}

jQuery代码实现

$(document).ready(function() {
  var pos = $('.child').position();
  console.log("top: " + pos.top + ", left: " + pos.left);
});

执行结果

top: 50, left: 50

总结

position()方法可以用于获取元素相对于父元素的位置信息，这对于动态调整元素在页面中的位置非常有用。熟练掌握这个方法可以让你在前端开发中事半功倍。