jQuery position()实例

当我们需要获取某个元素相对于文档的距离，或者需要对某个元素进行定位的时候，可以使用jQuery提供的 position() 方法。这个方法返回一个对象，包含了元素相对于其 offset parent（偏移父元素）的坐标信息。

使用语法：

$(selector).position();

其中 selector 表示需要获取位置信息的元素，该方法不需要任何参数。

返回值：

该方法返回一个对象，包含了元素相对于其 offset parent（偏移父元素）的坐标信息，该对象有两个属性：

top：元素相对于 offset parent 元素顶部的距离。
left：元素相对于 offset parent 元素左侧的距离。

下面通过两条示例说明 position() 方法的使用：

示例一：

假设我们需要将一个弹框居中显示，即弹框相对于视口垂直和水平居中，可以通过以下代码实现：

<body>
  <button id="btn">点击弹出居中弹框</button>
  <div id="dialog">这是一个弹框</div>
</body>

#dialog {
  position: fixed;
  width: 200px;
  height: 100px;
  background-color: #ddd;
  display: none;
}

$(function() {
  // 点击按钮弹出居中弹框
  $('#btn').click(function() {
    var dialog = $('#dialog');
    // 计算弹框相对于视口的坐标
    var top = ($(window).height() - dialog.outerHeight()) / 2;
    var left = ($(window).width() - dialog.outerWidth()) / 2;
    // 修改弹框的top和left属性
    dialog.css({
      top: top,
      left: left,
      display: 'block'
    });
  });
});

在这个例子中，通过使用 outerHeight() 和 outerWidth() 方法获取弹框的高度和宽度，然后使用 $(window).height() 和 $(window).width() 获取视口的高度和宽度，最后计算出弹框相对于视口顶部和左侧的距离，在设置弹框的 top 和 left 属性实现居中显示。

示例二：

假设我们需要对一个菜单进行定位，通过以下代码实现：

<button id="btn">点击弹出菜单</button>
<ul id="menu">
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul>

#menu {
  position: absolute;
  display: none;
  background-color: #ddd;
}

$(function() {
  // 点击按钮弹出菜单
  $('#btn').click(function() {
    var menu = $('#menu');
    // 获取按钮位置
    var pos = $(this).position();
    // 修改菜单的top和left属性
    menu.css({
      top: pos.top + $(this).outerHeight(),
      left: pos.left
    });
    // 显示菜单
    menu.show();
  });

  // 点击文档任意位置隐藏菜单
  $(document).click(function() {
    $('#menu').hide();
  });
});

在这个例子中，通过使用 position() 方法获取按钮的相对文档顶部和左侧的距离，然后在设置菜单的 top 和 left 属性实现菜单的定位。同时通过使用 $(document).click() 事件，可以隐藏菜单，提升用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery position()实例 - Python技术站

使用语法：

返回值：

示例一：

示例二：

相关文章