jQuery 객체 조작 메서드 (속성조작메서드, 수치조작메서드, 객체편집메서드)

객체를 생성, 복제, 삭제, 속성 변환하는 객체 조작 메서드들에 대해 알아보겠습니다. 객체 조작 메서드는 속성조작메서드와 수치조작메서드, 객체편집메서드가 있습니다.

 

 

 

 

객체 조작 메서드는 객체를 생성하거나 삭제, 복제할 때 사용하며 속성 조작 메서드는 요소의 속성을 바꿀 때, 수치 조작메서드는 요소의 너비값이나 높이값 등을 바꿀 때 사용하면 되겠습니다.

 

 

속성조작메서드

 

종류	사용법	설명
html() html("새 요소")	$("요소 선택").html(); $("요소 선택").html("새 요소");	선택한 요소의 하위 요소를 가져옴 선택한 요소의 하위 요소를 모두 제거하고 그 위치에 지정한 새 요소를 생성
text() text("새 텍스트")	$("요소 선택").text() $("요소 선택").text("새 텍스트")	선택한 요소가 감싸는 모든 텍스트를 가져옴 선택한 요소의 하위 요소를 모두 제거하고 그 위치에 지정한 새 텍스트를 생성
attr("속성명") attr("속성명", "새 값")	$("요소 선택").attr("속성명") $("요소 선택").attr("속성명", "새 값")	선택한 요소의 지정한 속성값을 가져옴 요소를 선택해 지정한 속성에 새 값을 적용
removeAttr("속성명")	$("요소 선택").removeAttr("속성명")	선택한 요소의 지정한 속성만 제거
prop("상태 속성명") prop("상태 속성명", 새 값)	$("요소 선택").prop("상태 속성명") $("요소 선택").prop("상태 속성명", 새 값)	선택한 요소의 상태 속성값을 가져옴 요소를 선택해 상태 속성에 새 값을 적용
val() val("새 값")	$("요소 선택").val() $("요소 선택").val("새 값")	선택한 폼 요소의 value 값을 가져옴 폼 요소를 선택해 value 속성에 새 값을 적용
css("속성명") css("속성명", "새 값")	$("요소 선택").css("속성명") $("요소 선택").css("속성명", "새 값")	선택한 요소의 지정한 스타일 속성값을 가져옴 요소를 선택하여 지정한 스타일 속성에 새 값을 적용
addClass("class 값")	$("요소 선택").addClass("class 값")	선택한 요소의 class 속성에 새 값을 추가
removeClass("class 값")	$("요소 선택").removeClass("class 값")	선택한 요소의 class 속성에 지정값만 제거
toggleClass("class 값")	$("요소 선택").toggleClass("class 값")	선택한 요소의 class 속성에 지정값이 포함되어 있으면 제거하고 속성값이 없으면 추가
hasClass("class 값")	$("요소 선택").hasClass("class 값")	선택한 요소의 class 값에 지정한 클래스 값이 포함되어 있으면 true 없으면 false 반환

 

html() 메서드는 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소로 바꿀 때 사용합니다. text() 메서드는 선택한 요소에 포함되어 있는 전체 텍스트를 가져오거나 선택한 하위 요소를 전부 제거하고 새 텍스틀를 생성할 때 사용합니다. attr() 메서드는 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때, 요소의 속성값을 불러올 때 사용합니다. removeAttr()은 선택한 요소에서 기존의 속성을 삭제할 때 사용합니다.

addClass() 메서드는 선택한 요소에 클래스를 생성하고, removeClass() 메서드는 선택한 요소에서 지정한 클래스를 삭제합니다. toggleClass() 메서드는 선택한 요소에 지정 클래스가 없으면 생성하고 있을 시 삭제합니다. 약간의 자동 개념입니다. hasClass( ) 메서드는 선택한 요소에 지정한 클래스가 있으면 true, 없을 시 false를 반환합니다.

val() 메서드는 선택한 form 요소의 value 속성값 (사용자가 입력하는 등)을 가져오거나 새 값을 적용할 때 사용합니다. prop() 메서드는 선택한 폼 요소의 상태 속성값을 가져오거나 새롭게 설정할 때 사용하며, 선택 요소의 tagName, nodeType, 그리고 선택상자의 선택된 옵션의 Index 값도 알 수 있습니다.

 

$("요소 선택").prop("[checked | selected]");
$("요소 선택").prop("[checked | selected]", [true | false});

$("요소 선택").prop("[tagName | nodeType | selectedIndex | defaultValue]");
// 선택한 요소의 태그명, 노드타입, 선택된 옵션의 인덱스값을 구합니다.

// 폼 요소에 prop("defaultValue")를 사용하면 
// value 속성값을 바꿔도 초기의 value 속성값을 가져옵니다.

 

 

* 단골 의문 : 제이쿼리 attr() 과 prop() 차이

기능 관련 속성을 제외한 나머지는 prop() / attr() 함수결과가 동일하게 나오며 "checked", "selected", "readonly", "disabled" 와 같은 속성일 때 attr 메서드는 checked로, prop 함수에서는 true / false로 출력을 시켜줍니다. 

 

 

 

 

수치조작메서드

 

종류	사용법	설명
height()	$("요소 선택").height(); $("요소 선택").height(100);	안쪽 여백과 선을 제외한 높이값을 반환하거나 변환
width()	$("요소 선택").width(); $("요소 선택").width(100);	안쪽 여백과 선을 제외한 너비값을 반환하거나 변환
innerHeight()	$("요소 선택").innerHeight();	안쪽 여백을 포함한 높이값을 반환하거나 변환
innerWidth()	$("요소 선택").innerWidth();	안쪽 여백을 포함한 너비값을 반환하거나 변환
outerHeight()	$("요소 선택").outerHeight();	선과 안쪽 여백을 포함한 높이값을 반환하거나 변환
outerWidth()	$("요소 선택").outerWidth();	선과 안쪽 여백을 포함한 너비값을 반환하거나 변환
position()	$("요소 선택").position().left(); $("요소 선택").position().top();	선택한 요소의 포지션 위치값을 반환
offset()	$("요소 선택").offset().left(); $("요소 선택").offset().top();	선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지 값 반환
scrollLeft()	$("요소 선택").scrollLeft();	브라우저의 수평 스크롤 이동 높이값 반환
scrollTop()	$("요소 선택").scrollTop();	브라우저의 수평 스크롤 이동 너비값 반환

 

 

height()와 width() 메서드는 여백, 선 두께를 제외한 순수 요소의 높이/너비값을 계산합니다. innerHeight()와 innerWidth() 메서드는 여백을 포함한 요소의 높이/너비값이고, outerHeight()와 outerWidth()메서드는 여백, 선을 포함한 요소의 높이/너비값입니다. 

 

 

출처 : TCP School

 

 

offset() 메서드는 Document를 기준으로 선택한 요소의 가로/세로로 떨어진 좌표값이며, position() 메서드는 선택한 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소(offset parent)를 기준으로 하는 상대 위치를 반환합니다. (참고) position() 메서드에서 기준으로 사용되는 부모 요소는 .offsetParent() 메소드를 사용하여 확인할 수 있습니다.

 

 

출처 : TCP School

 

 

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

 

 

감이 잘 잡히지 않으니 예제로 살펴보겠습니다. id "box_wrap" 의 position 속성에는 relative, class "box"의 position 속성에는 absolute 값을 적용했습니다.

 

 

 

 

 

 

 

scrollTop() 메서드는 브라우저의 스크롤바가 수직/수평으로 이동한 위치에 대한 값을 불러오거나 변경할 때 사용하는 스크롤바 위치 메서드입니다. 이 메서드의 기본형은 다음과 같습니다.

 

// 스크롤바가 수직/수평으로 이동한 위치값을 반환합니다.
$("요소 선택").scrollTop();
$("요소 선택").scrollLeft();

// 입력한 수치만큼 수직 또는 수평으로 스크롤바를 이동시킵니다.
$("요소 선택").scrollTop(새 값);
$("요소 선택").scrollLeft(새 값);

 

 

 

 

 

객체 편집 메서드

 

선택한 요소를 복제하거나 새 요소를 생성하는 메서드, 복제/생성한 요소를 의도한 위치에 삽입하고 선택 요소를 삭제하는 기능을 구현할 수 있습니다. 객체편집메서드의 종류와 사용법은 다음과 같습니다. 

 

종류	사용법	설명
before()	$("요소 선택").before("새 요소");	선택한 요소의 이전 위치에 새 요소 추가
after()	$("요소 선택").after("새 요소");	선택한 요소의 다음 위치에 새 요소 추가
append()	$("요소 선택").append("새 요소");	선택한 요소의 마지막 위치에 새 요소 추가
appendTo()	$("새 요소").appendTo("요소 선택");	선택한 요소의 마지막 위치에 새 요소 추가
prepend()	$("요소 선택").prepend("새 요소");	선택한 요소의 맨 앞 위치에 새 요소 추가
prependTo()	$("새 요소").prependTo("요소 선택");	선택한 요소의 맨 앞 위치에 새 요소 추가
insertBefore()	$("새 요소").insertBefore("요소 선택");	선택한 요소의 이전 위치에 새 요소 추가
insertAfter()	$("새 요소").insertAfter("요소 선택");	선택한 요소의 다음 위치에 새 요소 추가
clone()	$("요소 선택").clone(true or false);	선택한 문서 객체를 복제합니다. 인자값이 true일 경우 하위 요소까지 모두 복제, false일 경우 선택 요소만 복제
empty()	$("요소 선택").empty();	선택한 요소의 하위 내용을 모두 삭제
remove()	$("요소 선택").remove();	선택한 요소를 삭제
replaceAll()  replaceWith()	$("새 요소").replaceAll("요소 선택"); $("요소 선택").replaceWith(새 요소);	선택한 요소들을 새 요소로 교체
unwrap()	$("요소 선택").unwrap();	선택한 요소의 부모요소 삭제
wrap()	$("요소 선택").wrap(새 요소);	선택한 요소를 새 요소로 wrap
wrapAll()	$("요소 선택").wrapAll();	선택한 요소를 새 요소로 한꺼번에 wrap
wrapInner()	$("요소 선택").wrapInner(새 요소);	선택한 요소의 내용을 새 요소로 각각 wrap

 

 

append()/prepend()와 appendTo()/prependTo()는 선택한 요소와 새 요소의 위치만 서로 바뀐 것입니다. before()과 insertBefore()도 마찬가지입니다. replaceAll()과 replaceWith()는 선택한 요소를 새 요소로 바꾸는데 주로 선택한 모든 요소를 한꺼번에 바꿀 때 사용합니다.  wrap() 메서드를 사용할 때 새 요소에 <div></div>이렇게도 가능하지만 <div />이렇게 사용할 수도 있습니다. ($(".class").wrap("<div />");)