[jQuery] 제이쿼리 :: (2) 문서 객체 조작(DOM Control)

 

◽ 문서 객체 조작(DOM Control)

1) 탐색 선택자: 정확한 요소를 선택하는 방법

선택자	설명
$("ul li:odd")	<ul>의 <li> 요소 중 홀수 인덱스 요소만 선택
$("ul li:even")	<ul>의 <li> 요소 중 짝수 인덱스 요소만 선택
$("ul li:first")	<ul>의 <li> 요소 중 첫번째 요소 선택
$("ul li:last")	<ul>의 <li> 요소 중 마지막 요소 선택
$("ul li:eq(1)"), $("ul li").eq(1)	<ul>의 <li> 요소 중 두번째 요소만 선택
$("ul li:it(2)")	<ul>의 <li> 요소 중 세번째 이전 요소만 선택
$("ul li:gt(2)")	<ul>의 <li> 요소 중 세번째 이후 요소만 선택
$("ul li:nth-child(2n)")	<ul>의 <li> 요소 중 2의 배수 번째 요소만 선택
$("ul li:contains('문자')")	<ul>의 <li> 요소 중 "문자"가 포함된 요소만 선택
$("ul li:has('span')")	<ul>의 <li> 요소 중 <span> 태그가 포함된 요소만 선택
$("ul li").filter(".theObj")	<ul>의 <li> 요소 중 class가 "theObj"인 요소만 선택
$("ul li").find("a")	<ul>의 <li> 요소가 포함하는 <a> 요소만 선택
$("ul li:visible")	<ul>의 <li> 요소 중 보이는 요소만 선택
$("ul li:hidden")	<ul>의 <li> 요소 중 숨겨진 요소만 선택
$("h1, h2")	h1, h2 요소 선택
$("ul li").not(:empty)	<ul>의 <li> 요소 중 내용을 가진 요소만 선택

 

2) 문서 객체 조작 메서드: 문서 객체의 생성, 복제, 추가, 삭제 및 속성에 대한 변경, 삭제할 때 사용

선택자	설명
$("선택 요소").html()	선택한 요소의 하위 요소들을 반환
$("선택 요소").html("새 요소")	선택한 요소의 하위 요소들을 새 요소들로 변경
$("선택 요소").text("새 텍스트")	선택한 요소의 텍스트를 "새 텍스트"로 변경
$("새 요소")	새 요소 생성
$("선택 요소").append("새 요소")	선택 요소의 마지막 자식요소로 새 요소를 추가
$("선택 요소").prepend("새 요소")	선택 요소의 첫 자식요소로 새 요소를 추가
$("새 요소").appendTo("요소 선택")	선택 요소의 마지막 자식요소로 새 요소를 추가
$("새 요소").prependTo("요소 선택")	선택 요소의 첫 자식요소로 새 요소를 추가
$("새 요소").insertBefore(요소선택)	선택 요소 이전 위치에 형제요소로 새 요소를 추가
$("새 요소").insertAfter(요소선택)	선택 요소 다음 위치에 형제요소로 새 요소를 추가
$("선택 요소").clone(true / false)	선택 요소를 복제 (true: 하위 요소 포함 복제)
$("선택 요소").remove()	선택 요소 삭제
$("선택 요소").empty()	선택 요소의 하위 요소들 모두 삭제
$("선택 요소").attr("속성")	선택 요소의 특정 속성을 지정
$("선택 요소").attr("속성", "값")	선택 요소의 특정 속성을 새 값으로 변경
$("선택 요소").addClass("클래스명")	선택요소에 클래스명 부여
$("선택 요소").removeClass("클래스명")	선택요소에 지정된 클래스명 삭제
$("선택 요소").toggleClass("클래스명")	선택요소에 클래스명이 없으면 추가, 있으면 삭제
$("선택 요소").hasClass("클래스명")	선택요소에 클래스명이 있으면 true 반환
$("선택 요소").wrap("<div></div>")	선택 요소를 <div> 요소로 둘러 쌈
$("선택 요소").wrapAll("<div></div>")	선택 요소들 전체를 <div> 요소로 둘러 쌈

 

 

출처

김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020)

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.