제이쿼리 수치조작 메서드들

수치 조작 메서드

요소의 속성을 조작할 때 사용하는 메서드입니다.

 

-요소의 높이/너비 메서드

height()와 width() 메서드는 여백 및 선 두께를 제외한 순수 요소의 높잇값과 너빗값을 계산합니다.

innerHeight()와 innerWidth()메서드는 여백을 포함한 요소의 높잇값과 너빗값을 계산합니다

outerHeight()와 outerWidth()메서드는 여백 및 선을 포함한 요소의 높잇값과 너빗값을 계산합니다.

 

기본형:1.$(요소 선택).height(); /$(요소 선택).Width();

$(요소 선택).height(값); /$(요소 선택).Width(값);

 

2.$(요소 선택).innerHeight(); /$(요소 선택).innerWidth();

$(요소 선택).innerHeight(값); /$(요소 선택).innerWidth(값);

 

3.$(요소 선택).outerHeight(); /$(요소 선택).outerWidth();

$(요소 선택).outerHeight(값); /$(요소 선택).outerWidth(값);

 

-요소 위치 메서드

position() 메서드와 offset() 메서드가 있다.

 

position()->포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로/세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용.

 

offset()->문서(Document)를 기준으로 선택한 요소의 가로/세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용.

 

기본형:1.$(요소 선택).position().[left/right/top|bootom]

2.$(요소 선택).offset().[left | top ]

 

즉, 1번은 절대적인 위치를 나타내고 2번은 절대적인 위치를 기준으로 얼마나 떨어져있는지를 알려준다.

 

-스크롤바 위치 메서드

scrollTop()메서드는 브라우저의 스크롤바가 수직/수평으로 이동한 위칫값을 불러오거나 변경할 때 사용한다.

 

기본형 : 1.$(요소 선택).scrollTop(); $(요소 선택).scrollLeft();

2.$(요소 선택).scrollTop(새 값); $(요소 선택).scrollLeft(새 값);

 

1->스크롤바가 수직 OR 수평으로 이동한 위칫값을 반환

2->입력한 수치만큼 수직 또는 수평으로 스크롤바를 이동시킴.

 

객체 편집 메서드

선택한 요소를 복제하거나 새 요소를 생성하는 메서드와 복제하거나 새로 생성한 요소를 의도한 위치에 삽입하고 선택한 요소를 삭제하는 기능을 살펴보겠습니다.

 -before()/insertBefore()/after()/insertAfter()메서드

before와 insertBefore메서드는 선택한 요소의 이전 위치에 새 요소를 생성한다.

after와 insertAfter메서드는 선택한 요소의 다음 위치에 새 요소를 생성 한다.

 

기본형 : 1.$(“요소 선택”).before(“새 요소”);

2.$(“새 요소”).insertBefore(“요소 선택”);

3.$(“요소 선택”).after(“새 요소”);

4.$(“새 요소”).insertAfter(“요소 선택”);

 

->1과 3,2와 4는 서로 사용법만 다르고 기능은 같다.

 

 -append()/appendTo()/prepend()/prependTo()메서드

 

append와 appendTo메서드는 선택한 요소 내의 마지막 위치에 새 요소를 생성후 추가

prepend와 prependTo메서드는 선택한 요소 내의 앞 위치에 새 요소를 생성 하고 추가한다.

 

기본형 : 1.$(요소 선택).append(새 요소);

$(새 요소).appendTo(요소 선택);

2.$(요소 선택).prepend(새 요소);

            $(새 요소).prependTo(요소 선택);

 -clone () / empty() / remove() 메서드

clone은 선택한 요소를 복제합니다.

empty는 선택한 요소의 모든 하위 요소를 삭제합니다.

remove는 선택한 요소만을 삭제합니다.

 

기본형 : 1.$(“요소 선택”).clone( [true | false] );

2.$(“요소 선택”).empty();

3.$(“요소 선택”).remove();

 

1->선택한 요소를 복제합니다 인자값이 true이면 이벤트까지 복제하고 false면 요소만 복제합니다. 기본값은 false입니다.

2->선택한 요소의 모든 하위 요소를 삭제합니다.

3->선택한 요소를 삭제합니다.

 

-unwrap()/wrap()/wrapAll()/wrapInner() 메서드

unwrap메서드는 선택한 요소의 부모 요소를 삭제합니다.

wrap은 선택한 요소를 각각 새 요소로 감쌉니다.

wrapAll은 선택한 요소를 한꺼번에 새 요소로 감쌉니다.

wrapInner는 선택한 요소의 모든 하위 요소를 새 요소로 감쌉니다.