Jquery定位方法

时间:2013-05-01 12:26:36

标签: javascript jquery

根据Jquery API文档:

.position()返回: 对象

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

此方法不接受任何参数。参考here

但我找到的地方使用了这个:

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

一个对象已被传递给位置方法。这不是针对API文档的吗?看来传递给上面一个对象的属性有一些特殊含义。这些属性说明什么。他们做什么?我是完全初学者jquery.So可能是我错了。

4 个答案:

答案 0 :(得分:4)

.position()的变体是jQuery UI position utility的一部分。它为您提供了一种以特定方式相对于另一个元素(或鼠标光标)放置元素的简单方法。

原始的position()方法不接受参数......但是:

,这是完全正确的
  

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

答案 1 :(得分:2)

检查一下 - http://docs.jquery.com/UI/API/1.8/Position

该功能位于jqueryUI位置实用程序中,而非Core jQuery

答案 2 :(得分:1)

让我们把它带到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 ,这扩展了该方法。

答案 3 :(得分:1)

根据Position

的jQuery API
  1. my :定义要对齐的元素上的哪个位置 与目标元素。
  2. at :定义目标元素上与定位元素对齐的位置,
  3. :元素是否会被定位。如果提供选择器,将使用第一个匹配元素。示例:"#targetElement"在您的情况下。