jQuery position() 함수에 대한 자세한 설명과 jQuery_jquery에서의 위치 함수 적용

position() 함수는 위치가 지정된 상위 요소를 기준으로 현재 일치하는 요소의 오프셋, 즉 위치가 지정된 상위 요소를 기준으로 한 좌표를 반환하는 데 사용됩니다. 이 기능은 보이는 요소에만 작동합니다.

소위 "위치 지정 요소"는 요소의 CSS 위치 속성 값이 절대, 상대 또는 고정(기본 정적이 아닌 경우)이라는 의미입니다.

이 함수는 left 속성과 top 속성을 갖는 좌표 객체를 반환합니다. 속성 값은 모두 숫자이며, 모두 픽셀(px) 단위입니다.

offset()과의 차이점은 position()은 위치가 지정된 상위 요소를 기준으로 한 좌표를 반환하고, offset()은 현재 문서를 기준으로 한 좌표를 반환한다는 것입니다. 또한 position() 함수는 설정 작업에 사용할 수 없습니다. 현재 요소의 모든 조상 요소가 기본 위치 지정(정적)인 경우 이 함수가 반환하는 오프셋 위치는 offset() 함수와 동일합니다.

이 함수는 jQuery 객체(인스턴스)에 속합니다.

문법

이 기능은 jQuery 1.2의 새로운 기능입니다.

jQueryObject.position( )

반환값

position() 함수의 반환 값은 Object 유형이며, 가장 가까운 "위치 지정된" 조상 요소를 기준으로 오프셋 좌표 객체를 반환합니다. 이 객체에는 left 및 top 속성이 있습니다.

현재 jQuery 객체가 여러 요소와 일치하는 경우 좌표를 반환할 때 position() 함수는 첫 번째로 일치하는 요소만 사용합니다. 일치하는 요소가 없으면 정의되지 않은 값이 반환됩니다.

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에 상대 위치를 추가합니다.

<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에 가장 가까운 위치에 있는 조상 요소이므로(여기서는 상대, 절대, 고정도 마찬가지) position()은 n2 상대의 오프셋 위치를 반환합니다. n1에.

jQuery에서 위치 기능 적용(센터링, 오프 스크린 처리 등)

jQuery는 HTML 요소의 위치를 ​​쉽게 지정할 수 있는 Position 기능을 제공합니다. 간단한 사용 방법은 다음과 같습니다.

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

위는 매우 일반적인 사용법으로, 클릭 시간을 등록한 후 클릭 이벤트가 발생하면 클릭된 요소를 획득한 후 position 메소드를 이용하여 인터페이스에 대화상자를 표시합니다.

위치 함수는 매개변수가 많은 옵션 개체를 허용합니다

of: 배치할 개체를 나타냅니다. 클릭 이벤트 개체를 전달할 수도 있습니다.

My 및 at: 이 둘은 사실 참조 객체와 참조 객체입니다. my 매개변수는 참조 대상의 위치를 ​​나타냅니다. 값 범위는 "왼쪽 가운데 오른쪽 위 아래" 중 하나 또는 두 개입니다. 예: my:"top left",at:"left buttom", 이 구성은 설정할 요소의 왼쪽 위 모서리가 대상 요소의 왼쪽 아래 모서리에 배치됨을 의미합니다.

collision: 충돌 처리 방법을 나타냅니다. 값 범위는 "flip fit none"입니다. Flip에 대한 공식적인 영어 설명은 그다지 명확하지 않습니다. 실제 테스트 효과는 예상 범위(예: 창)를 초과하는 경우 대상 영역의 반대 위치에 요소를 배치하려고 시도한다는 것입니다. 맞춤은 적응입니다. 즉, 요소가 오버플로되지 않고 예상 범위 내에 완전히 배치됩니다. 그리고 none은 충돌 처리를 수행하지 않습니다.

offset은 요소를 my, at, of로 정렬한 후 오프셋할 거리를 나타냅니다. 예를 들어 "100 100"으로 설정하면 대상 위치로 이동한 다음 아래쪽과 오른쪽으로 100px 오프셋됩니다.

일반적인 용도는 팝업 대화 상자의 위치입니다. 마우스가 클릭한 위치에 대화 상자가 표시되도록 하려면 클릭으로 전달된 이벤트 객체를 of 매개 변수에 순서대로 전달하면 됩니다. 대화 상자가 창 범위 내에 있는지 확인하려면 충돌 설정을 사용하면 됩니다. 마지막으로 실제 필요에 따라 정렬 매개변수 my 및 at을 설정하고 오프셋을 사용하여 오프셋을 미세 조정합니다. 창 중앙에 팝업 대화 상자를 설정하는 예:

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

위 내용은 에디터가 공유해드린 jQuery position() 함수에 대한 자세한 설명과 jQuery에서의 position 함수 적용에 대한 전체 설명입니다.