JQuery_제이쿼리 문서 객체 선택자와 조작법(3)

6. 객체 조작

- 속성 조작 메서드

종류	사용법	설명
html() html("새 요소")	$("요소 선택").html(); $("요소 선택").html("새 요소");	선택한 요소의 하위 요소를 가져온다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성한다.
text() text("새 텍스트")	$("요소 선택").text(); $("요소 선택").text("새 텍스트");	선택한 요소가 감싸는 모든 텍스트를 가져온다. 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트를 생성한다.
attr("속성명") attr("속성명","새 값")	$("요소 선택").attr("속성명"); $("요소 선택").attr("속성명","새 값");	선택한 요소의 지정상 속성(attribute)값을 가져온다. 요소를 선택하여 지정한 속성에 새 값을 적용한다.
removeAttr("속성명")	$("요소 선택").removeAttr("속성명");	선택한 요소의 지정한 속성만 제거한다.
prop("상태 속성명") prop("상태 속성명", 새 값)	$("요소 선택").prop("상태 속성명"); $("요소 선택").prop("상태 속성명","새 값");	선택한 요소의 상태 속성값을 가져온다. 요소를 선택하여 상태 속성에 새 값을 적용한다.
val() val("새 값")	$("요소 선택").val(); $("요소 선택").val("새 값");	선택한 폼 요소의 value 값을 가져온다. 폼 요소를 선택하여 value속성에 새 값을 적용한다.
css("속성명") css("속성명","새 값")	$("요소 선택").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를 반환한다.

 

-수치 조작 메서드

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

 

-객체 편집 메서드

: 선택한 요소를 복제, 생성, 삽입, 삭제하는 기능이다.

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