[JQuery] 속성 / 요소 수치 조작 / 격체 편집 메서드들

 

속성 조작 메서드

종류	사용법	설명
html()	$("요소선택").html() $("요소선택").html("새로운 요소")	선택한 요소에 하위 요소들을 반환하거나, 새 요소로 변환
text()	$("요소선택").text() $("요소선택").text("새 텍스트")	선택한 요소에 포함하는 텍스트를 반환하거나 새 텍스트로 변환
css("속성") css("속성", "값")	$("요소선택").css("color") $("요소선택").css("color", "blue")	선택한 요소에 CSS 속성값을 반환 또는 변환
removeAttr("속성")	$("요소선택").removeAttr("title")	지정한 속성을 삭제
attr("속성") attr("속성", "값")	$("요소선택").attr("href") $("요소선택").attr("href", 'main.html')	선택한 요소에 속성값을 반환 또는 변환
addClass("클래스 값")	$("요소선택").addClass("abc")	지정한 클래스를 생성 또는 추가
removeClass("클래스 값")	$("요소선택").removeClass("abc")	지정한 클래스를 삭제
toggleClass("클래스 값")	$("요소선택").toggleClass("abc")	지정한 클래스 값을 생성,
hasClass('클래스 값")	$("요소선택").hasClass("ab")	선택한 요소에 지정한 클래스 값이 포함되어 있는지 검사해서 true / false 반환
prop("속성")	$("요소선택").prop(tag name)	선택한 태그의 속성들 반환
val() val(값)	$("요소선택").val() $("요소선택").val("aaa")	선택한 입력요소에 지정한 value값을 반환 또는 변환한다.

 

수치 조작 메서드

선택한 요소의 수치 관련된 속성을 변경하거나 값을 반환받을 때 사용

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

 

객체 편집 메서드

종류	사용법	설명
before()	$("요소").before("새 요소")	선택한 요소 이전에 새 요소 추가
after()	$("요소").after("새 요소")	선택한 요소 다음 위치에 새 요소 추가
append()	$("요소").append("새 요소")	선택한 요소의 마지막 위치에 새 요소 추가
appendTo()	$("요소").appendTo("다른 요소") $("p").appendTo("div")	선택한 요소를 다른 요소 안에 넣기 ex) <p>를 <div>안으로
prepend()	$("요소").prepend("새 요소")	요소의 맨 앞 위치에 새 요소 추가
prependTo()	$("새 요소").prependTo("요소")	요소의 맨 앞에 새 요소 추가
insertBefore()	$("요소").insertBefore("새 요소")	요소 이전 위치에 새 요소 추가
clone()	$("요소").clone( [true | false] )	선택한 문서 객체 복제. true : 하위 요소까지 모두 복제 false : 선택한 요소만 복제
empty()	$("요소").empty()	요소의 하위 내용들을 모두 삭제
remove()	$("요소").remove()	선택한 요소 삭제
replaceAll() replaceWith()	$("새 요소").replaceAll("요소 선택") $("요소").replaceWith("새 요소")	요소간에 교체
unwrap()	$("요소").unwrap()	선택한 요소에 부모요소를 삭제
wrap()	$("요소").wrap(새 요소)	요소에 새 요소로 각각 감싼다.
wrapAll()	$("요소").wrapAll(새 요소)	요소를 새 요소로 한번에 감싼다.
wrapInner()	$("요소").wrapInner(새요소)	요소 내의 내용을 새 요소로 각각 감싼다.

append() , appendTo()

동일한 기능을 수행하지만, 추가될 내용과 타겟의 위치가 다르다. <방향성 (to) 으로 이해한다면?>

A.append(B) : A에 B를 추가.

A.appendTo(B) : B를 A에 추가

 

$(".c1").wrap("<div>") : <div> 태그로 각 class = "c1" 인 요소를 각각 감싼다.

$("li").wrapInner("<h3 />") : <h3> 요소로 <li> 태그의 하위요소를 감싼다.