3. jquery DOM maniputlation 객체 조작 메서드(속성, 수치, 편집)

2022.12.28 - [IT/javascript] - 2. jquery selectors 여러가지 선택자들(기본, 탐색)

앞에서 배운 jquery 선택자로 원하는 객체 요소를 가져올 수 있게 되었으니,

이번에는 객체 조작 메서드를 배워 원하는 스타일로 변경해 보려고 합니다.

속성 조작 메서드

메서드
$("요소").html() $("요소").html("새 요소")	해당 하위 요소 해당 모든 하위 요소를 제거하고 새 요소 생성
$("요소").text() $("요소").text("새 텍스트")	해당 요소 텍스트 제거후 새 텍스트를 생성
$("요소").attr("속성명") $("요소").attr("속성명","값")	해당 요소 속성값 새 값으로 적용
$("요소").removeAttr("속성명")	해당 요소 속성 제거
$("요소").val() $("요소").val("새 값")	해당 요소 value 값 새 값으로 변경
$("요소").css("속성명") $("요소").css("속성명","새 값")	해당 요소 css 속성값 속성을 새 값으로 변경
$("요소").addClass("값")	새 class 속성 값을 추가
$("요소").removeClass("값")	해당 class 값을 제거
$("요소").toggleClass("값")	해당 class 값이 있으면 제거, 없으면 추가
$("요소").hasClass("값")	해당 class 값이 있으면 true, 없으면 false
$("요소").prop("상태 속성명") $("요소").prop("상태 속성명","새 값")	해당 상태 속성값 상태 속성을 새 값으로 변경(true, false)

수치 조작 메서드

메서드	설명
$("요소").height() $("요소").height(500)	padding, border을 제외한 높이 반환, 변경
$("요소").width() $("요소").width(500)	padding, border을 제외한 너비 반환, 변경
$("요소").innerHeight() $("요소").innerHeight(500)	padding을 포함한 높이 반환, 변경
$("요소").innerWidth() $("요소").innerWidth(500)	padding을 포함한 너비 반환, 변경
$("요소").outerHeight() $("요소").outerHeight(500)	padding, border을 포함한 높이 반환, 변경
$("요소").outerWidth() $("요소").outerWidth(500)	padding, border을 포함한 너비 반환, 변경
$("요소").position().top $("요소").position().right $("요소").position().bottom $("요소").position().left	position에 따른 해당 요소  위치 값
$("요소").offset().top $("요소").offset().left	document에 따른 해당 요소 위치 값
$(window).scrollTop()	브라우저 수직 스크롤 위치 반환, 변경
$(window).scrollLeft()	브라우저 수평 스크롤 위치 반환, 변경

객체 편집 메서드

메서드	설명
$("요소").before("새 요소")	해당 요소 이전에 새 요소 추가
$("요소").after("새 요소")	해당 요소 다음에 새 요소 추가
$("요소").append("새 요소")	해당 요소 마지막에 새 요소 추가
$("새 요소").appendTo("요소")	새 요소를 요소 마지막에 추가
$("요소").prepend("새 요소")	해당 요소 맨 앞에 새 요소 추가
$("새 요소").prependTo("요소")	새 요소를 요소 맨 앞에 추가
$("새 요소").insertBefore("요소")	새 요소를 요소 이전에 추가
$("새 요소").insertAfter("요소")	새 요소를 요소 이후에 추가
$("요소").clone(true | false)	true면 하위 요소까지 복제, false면 선택한 요소만 복제
$("요소").empty()	하위 내용들을 모두 삭제
$("요소").remove()	해당 요소 삭제
$("새 요소").replaceAll("요소") $("요소").replaceWith("새 요소")	해당 요소를 새 요소로 교체
$("요소").unwrap()	해당 요소의 부모 요소 삭제
$("요소").wrap("새 요소")	해당 요소를 새 요소로 각각 감쌈
$("요소").wrapAll("새 요소")	해당 요소를 새 요소로 한번에 감쌈
$("요소").wrapInner("새 요소")	해당 요소 하위 요소를 새 요소로 각각 감쌈

끝으로

jquery는 다양한 메서드를 사용해서 간단하게 객체를 조작할 수 있습니다.

그러나 jquery에 의존하기보다는 js 자체를 익히는 편이 추후에 더 좋을 것 같습니다.