jQuery position() 函數詳解以及jQuery中position函數的應用_jquery

position()函數用來傳回目前符合元素相對於其被定位的祖輩元素的偏移，也就是相對於被定位的祖輩元素的座標。此函數只對可見元素有效。

所謂"被定位的元素"，就是元素的CSS position屬性值為absolute、relative或fixed(只要不是預設的static即可)。

此函數傳回一個座標對象，該物件有一個left屬性和top屬性。屬性值均為數字，它們都以像素(px)為單位。

與offset()不同的是：position()傳回的是相對於被定位的祖輩元素的座標，offset()傳回的是相對於目前文件的座標。此外，position()函數無法用於設定操作。如果目前元素的祖輩元素全部都是預設定位(static)，那麼函數傳回的偏移位置與offset()函數相同。

函數屬於jQuery物件(實例)。

文法

jQuery 1.2 新增此函數。

jQueryObject.position( )

傳回值

position()函數的傳回值為Object類型，傳回一個相對於離它最近的"被定位的"祖輩元素的偏移座標對象，該物件具有left和top屬性。

如果目前jQuery物件符合多個元素，則傳迴座標時，position()函數只以其中第一個符合的元素為準。如果沒有符合的元素，則傳回undefined。

position()中的座標參考係是以被定位的祖輩元素的左上角為原點(0,0)，向右為正，向下為正。

範例&說明

以下面這段HTML程式碼為例：

<br>
<br>
<p id="n1"><span id="n2">专注于编程开发技术分享</span></p>

以下jQuery範例程式碼用於示範position()函數和offset()函數的用法：

var $n2 = $("#n2");
// 输出n2的偏移坐标
var pos = $n2.position();
document.writeln( "n2的position()偏移坐标：(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标：(8, 60)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标：(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标：(8, 60)

從上述jQuery的運行結果可知，position()並不是取得相對於其父元素的偏移位置。如果n2的祖先元素全部為預設定位，則position()傳回的偏移位置和offset()函數一致。

下面，我們將上述HTML程式碼中的n1加上相對定位(relative)：

<br>
<br>
<p id="n1" style="position: relative;" ><span id="n2">专注于编程开发技术分享</span></p>

然後，我們重新執行上述jQuery程式碼，可以看到以下結果：

var $n2 = $("#n2");
// 输出n2的偏移坐标
var pos = $n2.position();
document.writeln( "n2的position()偏移坐标：(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标：(0, 0)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标：(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标：(8, 60)

此時，在n2的祖輩元素中，n1是離n2最近的定位的祖輩元素(這裡是relative，absolute、fixed也是如此)，因此position()返回n2相對於n1的偏移位置。

.jQuery中position函數的應用(居中，超出螢幕處理等)

jQuery提供了一個Position函數，可以很方便的對Html元素進行定位，簡單的使用方法如下:

$(".daygrid").click(function(event){
  clickedGrid = $(this);
  $(".modal").modal("show");
  $(".modal").position({
    of:clickedGrid,
    offset:" ",
    collision:"fit"
  });
});

上面是一個很常用的用法，註冊一個click時間，然後當有點擊事件發生時，獲取到被點擊的元素，然後將對話框用position方法顯示至界面中。

position函數接受一個options對象，參數有很多

of：表示要放置在那個物件上，也可以傳遞click的event物件

my與at：這兩個比較不容易理解，其實也就是參照物和被參照物，my參數表示用什麼位置來做參照而at表示參照目標的那個位置。值範圍為”left center right top bottom”的任一個或兩個。舉個例子：my:”top left”,at:”left buttom”，這樣配置表示將要被定為的元素的左上角放置在目標元素的左下角。

collision：表示如何處理碰撞，值範圍為:”flip fit none」三選一。 flip的官方英文說明看不是很懂，實際測試的效果是，如果超出了預期範圍（如window）則會嘗試將元素放置到目標區域的相反位置。 fit是適應，也就是會將元素完整的放置在預期範圍內，而不會讓元素溢出。而none則是不做任何碰撞處理。

offset表示依靠my、at、of對齊元素後再進行多少距離的偏移，例如設定為」100 100″表示移至目標位置後再向下和右偏移100px

常見的使用就是彈出對話框的位置，為了讓對話框在滑鼠點擊的位置顯示，則可以將click傳的event物件傳遞給of參數，為了確保對話框在視窗範圍內，可以將collision設定為fit。最後再根據實際需求來設定對齊參數my和at，並且用offset進行偏移微調。一個將彈出對話框設定在視窗中央的範例：

$("#myDialog").position({
  my: "center",
  at: "center",
  of: window,
  collision:"fit"
});

以上內容是小編給大家分享的jQuery position() 函數詳解以及jQuery中position函數的應用的全部敘述，希望大家喜歡。