jQuery / Method / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드

.offset()

.offset()은 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킵니다.

문법 1

.offset()

선택한 요소의 좌표를 가져옵니다. 예를 들어

var jb = $( 'h1' ).offset();

는 h1 요소의 좌표를 변수 jb에 저장합니다.

문법 2

.offset( coordinates )

선택한 요소를 특정 위치로 이동시킵니다. 예를 들어

$( 'h1' ).offset( { left: 100, top: 50 } );

은 h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 이동시킵니다.

예제 1

h1과 h2 요소의 좌표를 출력합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        var jb1 = $( 'h1' ).offset();
        var jb2 = $( 'h2' ).offset();
        $( 'h2' ).after(
          '<p>' + 'H1 - Left : ' + jb1.left + ', Top : ' + jb1.top + '</p>'
          + '<p>' + 'H2 - Left : ' + jb2.left + ', Top : ' + jb2.top + '</p>'
        );
      } );
    </script>
  </head>
  <body>
    <h1>Lorem</h2>
    <h2>Ipsum</h2>
  </body>
</html>

예제 2

h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 이동시킵니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'h1' ).offset( { left: 100, top: 50 } );
      } );
    </script>
  </head>
  <body>
    <h1>Lorem</h2>
    <h2>Ipsum</h2>
  </body>
</html>

같은 카테고리의 다른 글
jQuery / Method / .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드

jQuery / Method / .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드

.replaceWith() .replaceWith()는 선택한 요소를 다른 것으로 바꿉니다. 문법 .replaceWith( newContent ) 예를 들어 h1 요소를 abc로 바꾸고 싶다면 다음과 같이 합니다. $( 'h1' ).replaceWith( 'abc' ); h1 요소의 내용 뿐 아니라 h1 태그까지 지우고 바꾼다는 것에 주의합니다. newContent에는 특정 요소가 들어갈 수 있습니다. 예를 들어 $( 'h1' ).replaceWith( $( 'p.a' ) ); 는 h1 요소를 클래스 값이 a인 p ...

jQuery / .ajax() / 동기식으로 사용하는 방법

jQuery / .ajax() / 동기식으로 사용하는 방법

Ajax는 Asynchronous JavaScript and XML의 약자입니다. 이름에서도 알 수 있듯이 비동기식으로 데이터를 가져옵니다. jQuery의 .ajax()도 마찬가지입니다. 데이터 요청을 해놓고 요청에 응답하는 순서대로 처리합니다. 비동기식이 여러모로 효율적이지만, 간혹 동기식 처리가 필요한 경우가 있습니다. 데이터 처리를 요청한 순서대로 해야 하는 경우 .ajax()로 가져온 데이터를 전역 변수로 넘겨야 하는 경우 .ajax()를 동기식으로 처리하려면 async: false 를 추가하면 됩니다. $.ajax ( { ...

jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

.detach() .detach()는 선택한 요소를 문서에서 제거합니다. 제거한다는 면에서는 .remove()와 같으나, .detach()는 제거한 요소를 저장하여 다시 사용할 수 있습니다. 문법 .detach( ) 예를 들어 var jb = $( 'h1' ).detach(); 는 h1 요소를 문서에서 제거하고 변수 jb에 저장합니다. 예제 Cut 버튼을 클릭하면 Dolor를 잘라내고, Paste 버튼을 클릭하면 Ipsum 위에 붙여넣습니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

개요 .length는 선택한 요소의 개수를 반환하는 속성이다. 예를 들어 다음은 div 요소의 개수를 반환한다. $( 'div' ).length 예제 1 버튼을 클릭하면 li 요소의 개수를 출력한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <script> $( document ...

jQuery / Method / .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드

jQuery / Method / .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드

.appendTo() .appendTo()는 선택한 요소를 다른 요소 안에 넣습니다. 문법 .appendTo( target ) 예를 들어 $( 'p' ).appendTo( 'blockquote' ); 는 p 요소를 blockquote 요소 안으로 이동시킵니다. 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소 안으로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 ...

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자이다. 문법 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의한다. $( ':contains( text )' ) 예를 들어 다음은 ab 문자열을 포함한 p 요소를 선택한다. $( 'p:contains( "ab" )' ) 예제 jb를 포함한 p 요소를 선택해서 글자를 빨간색으로 만든다. 첫번째 문단은 jb가 없어서, 세번째 문단은 jb가 있지만 대문자여서 선택되지 않는다. <!doctype html> <html lang="ko"> ...

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

.find() .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 $( 'h1' ).find( 'span' ) 은 h1 요소의 하위 요소 중 span 요소를 선택합니다. 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .each() - 선택한 요소 각각에 대하여 함수를 실행시키는 메서드

jQuery / Method / .each() - 선택한 요소 각각에 대하여 함수를 실행시키는 메서드

.each()는 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수를 실행한다. 문법 .each( function ) 특정 조건을 만족할 때 반복 작업에서 빠져려면 다음을 추가한다. return false 예제 1 p 요소에 각각 다른 클래스를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

.slideUp() .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...