[JS + jquery] 객체 조작 메서드 (수치 조작 메서드, 객체 편집 메서드)

https://hyejin.tistory.com/200

[JS + jquery] 객체 조작 메서드 (속성 조작 메서드 html(), text(), attr(), removeAttr(), prop(), val(), css(), addCl

객체 조작 메서드 앞편 

 

1. 수치조작 메서드 

수치 조작 메서드는 요소의 속성을 조작할 때 사용하는 메서드이다. 

 

1️⃣ 요소의 높이, 너비 메서드 

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

innerHeight() 와 innerWeight() 메서드는 여백을 포함한 요소의 높이값과 너비값을 계산한다.

outerHeight()와 outerWeight() 메서드는 여백 및 선을 포함한 요소의 높이값과 너비값을 계산한다.

 

$(요소선택).height(); / $(요소선택).width();

$(요소선택).hegiht(값); / $(요소선택).width(값);

 

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

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

 

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

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

 

 

2️⃣ 요소 위치 메서드 

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

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

 

$(요소선택).position().[left|right|top|bottom]

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

 

3️⃣ 스크롤바 위치 메서드 

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

 

$(요소선택).scrollTop(); / $(요소선택).scrollLeft();  

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

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

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

 

 

2. 객체 편집 메서드 

선택한 요소를 복제하거나 새 요소를 생성하는데 메스드와 복제하거나 새로 생성한 요소를 의도한 위치에 삽입하고 선택한 요소를 삭제하는 기능이다. 

 

1️⃣ before()/ insertBefore() / after() / insertAfter() 메서드 

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

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

 

$("요소 선택").before("새 요소");

$("요소 선택").insertBefor("새 요소");

$("요소 선택").after("새 요소");

$("요소 선택").insertAfter("새 요소");

 

2️⃣ append()/ appendTo() / prepend() / prependTo() 메서드

append() 메서드와 appendTo() 메서드는 선택한 요소 내의 마지막 위치에 새 요소를 생성하고  추가한다.

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

 

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

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

 

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

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

 

 

3️⃣ clone() / empty() / remove() 메서드 

clone() 메서드는 선택한 요소를 복제한다. 

empty() 메서드는 선택한 요소의 하위 요소를 삭제한다. 

remove() 메서드는 선택한 요소를 삭제한다. 

 

$("요소선택").clone([true|false]);

$("요소선택").empty();

$("요소선택").remove();

 

4️⃣ replaceAll() / replaceWith() 메서드 

replaceAll() 메서드와 replaceWith() 메서드는 선택한 요소를 새 요소로 바꿀 때 사용한다. 

 

$("새 요소").replaceAll("요소 선택");

$("요소 선택").replaceWith("새 요소");

 

5️⃣ unwrap() / wrap() / wrapAll() / wrapInner() 메서드 

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

wrap() 메서드는 선택한 요소를 각각 새 요소로 감싼다.

wrapAll() 메서드는 선택한 요소를 한꺼번에 새 요소로 감싼다. 

wrapInner() 메서드는 선택한 요소의 모든 하위 요소를 새 요소로 감싼다. 

 

$("요소 선택").unwrap();

$("요소 선택").wrap(새 요소);

$("요소 선택").wrapAll(새 요소);

$("요소 선택").wrapInner(새 요소);