Jquery定位方法

Jquery position method

本文关键字：方法 定位 Jquery      更新时间：2023-09-26

根据Jquery API文档:

.position()返回: 对象

Description: 获取匹配元素集合中第一个元素相对于偏移量父元素的当前坐标。

这个方法不接受任何参数。在这里引用

但是在某个地方我发现使用这个:

$("#position1").position({
  my: "center",
  at: "center",
  of: "#targetElement"
});

一个对象被传递给position方法，这是不是违反了API文档?似乎上面传递给对象的属性有一些特殊的含义。这些属性说明了什么，它们的作用是什么?我是一个完全的jquery初学者。所以可能我错了。

这个.position()的变体是jQuery UI位置实用程序的一部分。它为您提供了一种简单的方法，以某种方式将一个元素相对于另一个元素(或鼠标光标)放置。

你完全正确，原来的position()方法不接受参数…但是:

这个插件扩展了jQuery内置的。position()方法。如果没有加载jQuery UI，调用.position()方法可能不会直接失败，因为该方法仍然存在。但是，预期的行为不会发生。

查看- http://docs.jquery.com/UI/API/1.8/Position

该功能是在jqueryUI的位置实用程序，而不是在核心jQuery

让我们把它带到codez !快速浏览一下jQuery 1.9.1源代码可以发现:

position: function() {
    if ( !this[ 0 ] ) {
        return;
    }
    var offsetParent, offset,
        parentOffset = { top: 0, left: 0 },
        elem = this[ 0 ];
    // fixed elements are offset from window (parentOffset = {top:0, left: 0}, because it is it's only offset parent
    if ( jQuery.css( elem, "position" ) === "fixed" ) {
        // we assume that getBoundingClientRect is available when computed position is fixed
        offset = elem.getBoundingClientRect();
    } else {
        // Get *real* offsetParent
        offsetParent = this.offsetParent();
        // Get correct offsets
        offset = this.offset();
        if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) {
            parentOffset = offsetParent.offset();
        }
        // Add offsetParent borders
        parentOffset.top  += jQuery.css( offsetParent[ 0 ], "borderTopWidth", true );
        parentOffset.left += jQuery.css( offsetParent[ 0 ], "borderLeftWidth", true );
    }
    // Subtract parent offsets and element margins
    // note: when an element has margin: auto the offsetLeft and marginLeft
    // are the same in Safari causing offset.left to incorrectly be 0
    return {
        top:  offset.top  - parentOffset.top - jQuery.css( elem, "marginTop", true ),
        left: offset.left - parentOffset.left - jQuery.css( elem, "marginLeft", true)
    };
},

不读取参数，不使用参数。无论你看到什么代码，它都不是jQuery核心。最有可能的原因是原作者使用了jQuery UI，它扩展了该方法。

根据jQuery API的位置

  1. my:定义要对齐的元素的位置
  2. at:定义要对齐的元素在目标元素上的哪个位置，
  3. of:用于定位元素。如果您提供了一个选择器，那么将使用第一个匹配元素。例如:"#targetElement"。
相关文章：