[jQuery] 좌표 개념, 위치(좌표) 다루기, 크기 다루기

※ 위치 개념

지역 좌표 :  부모 노드 기준 좌표

전역 좌표 : 최상위 노드인 document의 left, top 위치가 0으로 시작

※ 위치다루기

지역 좌표 구하기

$대상.position().left /  $대상.position().top

ex) $("child").position().top;

지역 좌표 설정

$대상.css("left 또는 top 값")

ex) $("child").css({

     left : 값,

     top : 값

});

ex) $("child").css("left", 값);

부모 좌표 구하기

자바스크립트에서 부모 좌표 노드는 약간 다른데 DOM에서는 position의 속성값이 absolute와 relative의 설정이 있다.

그렇기 때문에 부모노드는 바로 위의 상위 노드가 아니라 position의 속성값이 같은 가장 가까운 조상 노드가 부모 좌표 노드가 된다.

<div id="parent1">

     <div id ="parent2">

          <div id ="child">

          </div>

     </div>

</div>

에서 만약 child와 parent1의 position속성값이 absolute이고 parent2가 relative이면 child의 부모 좌표 노드는 바로 상위의 parent2가 아닌 parent1이 postion속성값이 가장 가까운 조상 노드이기 때문에 parent1이 부모 좌표 노드가된다

$대상.offsetParent()

ex) $("child").offsetParent();

---

전역 좌표 구하기

$대상.offset().left / $대상.offset().top

ex) $("child").offset().left;

전역 좌표 설정

$대상.offset({left : 좌표값, top : 좌표값})

ex) $("child").offset({

     left : 값,

     top : 값

});

※ 클릭한 마우스 전역 위치 값 구하기

x 위치값 : event.pageX

y 위치값 : event.pageY

ex) $("child").click(function(e){

     var x = e.pageX;

     var y = e.pageY;

});

※ 스크롤 위치 구하기

$스크롤이 있는 대상.scrollLeft()

$스크롤이 있는 대상.scrollTop()

ex) var scrollLeftInfo = $("div").scrollLeft();

    var scrollTopInfo = $("div").scrollTop();

※ 스크롤 위치 설정하기

$스크롤이 있는 대상.scrollLeft(위치값)

$스크롤이 있는 대상.scrollTop(위치값)

ex) $("div").scrollLeft(0);

    $("div").scrollTop(0);

※화면 위치 및 크기관련하여

 - 전체 모니터 화면 영역 관련

1. 전체 화면 크기 구하기 screen.width / screen.height
2. 유효한 전체화면(운영체제의 작업표시줄 영역이 삭제된 화면) 크기 구하기

          screen.availWidth / screen.availHeight

 - 웹브라우저 창(window) 영역 관련

1. 브라우저 창 기본 크기 (메뉴바, 툴바, 스크롤바 크기에서 제외) 구하기

          window.innerWidth / window.innerHeight

2. 기본크기 + 메뉴바 + 툴바 영역이 포함된 크기 구하기

          window.width() / window.height()

3. 기본크기 + 메뉴바 + 툴바 + 스크롤바 영역이 포함된 크기 구하기
   window.outerWidth / window.outerHeight
4. 윈도우 크기 설정하기(웹브라우저 창 크기 설정)

          window.resizeTo(width, height)

5. 윈도우 리사이징 이벤트 처리

          $(window).on("resize", function(e){ 이벤트 처리 영역 });

6. 윈도우 위치(웹브라우저 좌표) 구하기

          window.screenLeft / window.screenTop

7. 윈도우 위치 설정하기

          window.moveTo(dx,dy) 화면에서 윈도우 이동

          window.moveBy(dx,dy) 현재 윈도우 위치에서 이동 

8. 윈도우(웹브라우저) 스크롤 위치 구하기

          window.pageXOffset / window.pageYOffset

9. 스크롤 위치 설정하기.

          window.scrollTo(x,y) 윈도우 영역에서 스크롤 위치를 x,y로 이동

          window.scrollBy(x,y) 윈도우 영역에서 현재 스크롤 위치에서 x,y로 이동

10. 스크롤 이벤트 처리

          $(window).on("click", function(){ 이벤트 처리 });

※ 마우스 위치 및 크기 관련하여

1. 윈도우를 기준으로 하는 클릭한 전역위치 구하기 (현재 보이는 웹브라우저를 기준)

          mouseEvent.clientX / mouseEvent.clientY

2. 문서(document)를 기준으로 하는 전역 위치  (현재 보이지않는 document위치를 포함)

          mouseEvent.pageX / mouseEvent.pageY

3. 클릭한 지역 위치 구하기

          var x = e.pageX - $(타깃).offset().left 

          var Y = e.pageY - $(타깃).offset().top