[jQuery] 요소조작

하위요소 및 텍스트 노드 조작

하위요소 및 텍스트 노드를 읽고/쓰기가 가능하다.

 

문장	설명
$("div").html()	하위요소 읽기
$("div").html("<h>hi</h1>")	하위요소 쓰기
$("div").text()	텍스트 노드 읽기
$("div").text("<h1>hi</h1>")	텍스트 노드 쓰기

 

See the Pen bGdwJjX by melius102 (@melius102) on CodePen.

 

 

태그 속성(Attribute)과 요소 속성(Property) 조작

attr와 prop의 동작은 기본적으로 일치하나, form 요소들은 사용자의 조작을 통해서 태그 속성값과 요소의 속성값이 다를 수 있다.

 

문장	설명
$("img").attr("alt")	HTML 태그의 속성(Attribute) 값 읽기
$("img").attr("alt", "no img")	HTML 태그의 속성(Attribute) 값 쓰기
$("img").removeAttr("alt")	HTML 태그의 속성(Attribute) 삭제
$("input").prop("checked")	DOM 요소의 속성(Property) 값 읽기
$("input").prop("checked", true)	DOM 요소의 속성(Property) 값 쓰기
$("select").prop("selectedIndex")	select 요소의 선택된 option 요소의 인덱스 읽기
$("input").val()	$("input").prop("value")와 같음
$("input").val("hello")	$("input").prop("value", "hello")와 같음

 

See the Pen jQuery attr prop by melius102 (@melius102) on CodePen.

 

 

태그 class 및 CSS 속성 조작

HTML 태그의 class와 CSS 속성을 추가/수정/삭제할 수 있다.

 

문장	설명
$("div").addClass("class-name")	div 태그에 클래스 추가
$("div").removeClass("class-name")	div 태그에 클래스 삭제
$("div").toggleClass("class-name")	div 태그에 클래스 토글
$("div").hasClass("class-name")	div 태그가 특정 클래스인지 판별, Boolean 반환
$("div").css("color")	div 태그의 CSS 속성 읽기
$("div").css("color", "red")$("div").css({"color", "red"})	div 태그의 CSS 속성 쓰기