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

jQuery

.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 / 자식 요소의 개수를 기준으로 부모 요소 선택하기

자식 요소의 개수를 기준으로 부모 요소을 선택하기 위해서는 스크립트를 이용해야 합니다. 다음은 jQuery를 이용한 간단한 예제입니다. li 요소를 3개 이상 가진 ol 요소를 선택해서 글자를 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> .a ...

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 / .load()

.load() .load()는 다른 문서 등에서 내용을 가져와 현재 문서에 나타냅니다. 문법 .load( url ) 예를 들어 a.html의 p 요소를 가져와 div 요소 안에 넣으려면 다음과 같이 합니다. $( 'div' ).load( 'a.html p' ); 예제 load-02.html에서 id 값이 ab인 요소를 가져와서, 현재 문서의 id 값이 xy인 요소 안에 넣습니다. load-01.html <!doctype html> <html lang="ko"> ...

jQuery / Plugin / AOS / 스크롤하면 애니메이션 효과와 함께 나타나는 요소 만드는 라이브러리

AOS 세로로 긴 웹 페이지가 있습니다. 화면을 벗어나는 경우 스크롤하면 밑에 있는 콘텐츠를 볼 수 있습니다. 그 보여지는 콘텐츠에 애니메이션 효과를 주는 라이브러리가 AOS(Animate on scroll library)입니다. 나타나기, 회전하기, 확대하기 등 다양한 효과를 제공합니다. Fade animations fade, fade-up, fade-down, fade-left, fade-right, fade-up-right, fade-up-left, fade-down-right, fade-down-left Flip animations flip-up, flip-down, flip-left, flip-right Slide animations slide-up, slide-down, slide-left, slide-right Zoom animations zoom-in, ...

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

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

jQuery / Selector / :button - type이 button인 요소를 선택하는 선택자

:button은 type이 button인 요소를 선택하는 선택자이다. 문법 type이 button인 모든 요소를 선택한다. $( ':button' ) type이 button이면서 class 값으로 xy를 갖는 요소를 선택한다. $( '.xy:button' ) 예제 type이 button인 요소의 글자 모양을 기울임꼴로 만들고, 클래스 값이 ab면서 type이 button인 요소의 글자 색은 빨간색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> ...

jQuery / Method / .toggle() - 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 하는 메서드

.toggle() .toggle()은 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 합니다. 문법 .toggle( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 ...

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

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

jQuery / Selector / :selected - select에서 선택된 option를 선택하는 선택자

:selected는 select에서 선택된 option를 선택한다. :selected 대신 :checked를 사용해도 된다. 색을 선택하면 그 값을 div 요소의 배경색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { font-family: Consolas, monospace; ...

jQuery / Method / .html() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.html() .html()은 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .text()와 비슷하지만 태그의 처리가 다릅니다. 문법 1 .html() HTML 태그를 포함하여 선택한 요소 안의 내용을 가져옵니다. 예를 들어 var jb = $( 'h1' ).html(); 는 h1 요소의 내용을 변수 jb에 저장합니다. 문법 2 .html( htmlString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( '<h1>Lorem</h1>' ); 는 div ...

CODING FACTORY