[Do it!] 06. 제이쿼리 문서 객체 선택자와 조작법 [4.객체 조작]

객체 조작 메서드

객체를 생성, 복제, 삭제, 속성 변환하는 객체 조작 메서드

 

속성 조작 메서드

요소의 속성을 바꿀 때 사용

종류	사용법	설명
html() html("새요소")	$("요소 선택").html() $("요소 선택").html("새요소")	- 선택한 요소의 하위 요소 가져오기 - 선택한 요소의 하위 요소를 모두 제거, 새 요소생성
text() text("새 텍스트")	$("요소 선택").text() $("요소 선택").text("새 텍스트")	- 선택한 요소가 감싸는 모든 텍스트 가져오기 - 선택한 요소의 하위 요소 모두 제거, 새 텍스트 생성
attr("속성명") attr("속성명","새 값")	$("요소 선택").attr("속성명") $("요소 선택").attr("속성명","새 값")	- 선택한 요소의 지정한 속성 가져오기 - 요소의 지정한 속성에 새 값 적용
removeAttr("속성명")	$("요소 선택").removeAttr("속성명")	- 선택한 요소의 지정한 속성만 제거
prop("상태 속성명") prop("상태 속성명", 새 값)	$("요소 선택").prop("상태 속성명") $("요소 선택").prop("상태 속성명", 새 값)	- 선택한 요소의 상태 속성값 가져오기 - 요소의 상태 속성에 새 값 적용
val() val("새 값")	$("요소 선택").val() $("요소 선택").val("새 값")	- 선택한 요소의 value 값 가져오기  - value 속성에 새 값 적용
prop("[tagName | nodeType | selectedIndex | defaultValue]")	prop("[tagName | nodeType | selectedIndex | defaultValue]")	선택한 요소의 태그명, 노드타입, 선택된 인덱스값, 초기값 가져오기
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(100)	안쪽 여백을 포함한 높이값을 반환하거나 변환
innerWidth()	$("요소선택").innerWidth() $("요소선택").innerWidth(100)	안쪽 여백을 포함한 너빗값을 반환하거나 변환
outerHeight()	$("요소선택").outerHeight() $("요소선택").outerHeight(100)	선과 안쪽 여백을 포함한 높잇값을 반환하거나 변환
outerWidth()	$("요소선택").outerWidth() $("요소선택").outerWidth(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(true of false)	문서 객체 복사 true일 경우 하위까지 복사 false일 경우 선택한 것만 복사
empty()	$("요소선택").empty()	하위 내용들 모두 삭제
remove()	$("요소선택").remove()	선택한 요소 삭제
replaceAll() /  replaceWith()	$("새 요소").replaceAll("요소선택") $("요소선택").replaceWith("새 요소")	선택한 요소들을 새 요소로 교체
unwrap()	$("요소선택").unwrap()	부모 요소 삭제
wrap()	$("요소선택").wrap(새 요소)	새 요소로 각각 감싸기
wrapAll()	$("요소선택").wrapAll()	새 요소로 한꺼번에 감싸기
wrapInner()	$("요소선택").wrapInner(새 요소)	내용을 새 요소로 각각 감싸기