[제이쿼리] 제이쿼리 문서 객체 선택자와 조작법

 

 

Do it! 자바스크립트 + 제이쿼리 입문

4년 연속 베스트셀러! 전면 개정판으로 출간! 자바스크립트, 제이쿼리의 기본부터 실전에 필요한 핵심까지 모두 담았다! ‘두잇 시리즈 최고 작품’이라 평가받은 책! 전면 개정판으로 더욱 알차게 만들었습니다! 이제는 웹 개발자뿐만 아니라 웹 퍼블리셔와 디자이너에게도 코딩 능력이 필요한 시대! 자바스크립트를 1도 모르겠다면? 프런트엔드 실무 교육 경력 10년 강사가 엄선한 155개의 예제로 기본부터 실무 활용까지 완벽하게 대비하세요. 실제 사이트에 적용하는 ‘반응형 웹 UI 만들기’까지 실습하고 나면 실무가 두렵지 않은 자신을 발견할 수 있을 것입니다!

저자

정인용

출판

이지스퍼블리싱

출판일

2018.04.06

 

  목 차

  1. 제이쿼리 기본 다지기

  2. 선택자 
  3. 제이쿼리 탐색 선택자
  4. 객체 조작

 

---

< 1. 제이쿼리 기본 다지기 >

• 제이쿼리란?
  ➡ 자바스크립트를 이용해 만든 라이브러리 언어
• 라이브러리 언어?
  ➡ 자바스크립트로 만들어진 다양한 함수들의 집합
• 제이쿼리에서 개선된 사항들
  1) 호환성 문제 해결
  2) 쉽고 편리한 애니메이션 효과 기능 구현

---

< 2. 선택자 >

• 선택자 : HTML 요소를 선택하여 가져온다.
• 제이쿼리 선택자 : 사용시 "동적"으로 스타일 적용 가능
• 선택자 사용시 주의사항
  ➡ 문서 객체를 먼저 불러온 다음 선택자를 사용할 수 있도록 해야 함
  ➡ $(document).ready(function(){ ~  또는  $(function() { ~
  
  
• 기본 선택자 = 직접 선택자 + 인접 관계 선택자

직접 선택자 (멀리 떨어진 요소 직접 선택 시)
전체 선택자	$("*")	모든 요소 선택
아이디 선택자	$("#아이디명")	-
클래스 선택자	$(".클래스명")	-
요소 선택자	$("요소명")	-
그룹 선택자	$("선택 1, 선택 2, ,,, 선택 n")	지정된 요소들을 한 번에 선택
종속 선택자	$("p.txt_1") 또는 $("p#txt_1")	<p> 요소 중 class 값이 txt_1인 요소  또는 id 값이 txt_1인 요소

 

인접 관계 선택자 (직접 선택자로 요소를 먼저 선택하고 요소 가까이에 있는 요소 선택 시)
부모 요소 선택자	$("요소 선택").parent()	선택 요소의 부모 요소 선택
상위 요소 선택자	$("요소 선택").parents()	선택 요소의 상위 요소를 모두 선택
가장 가까운 상위 요소 선택자	$("요소 선택").closest("div")	선택 요소의 상위 요소 중 가장 가까운 <div>만 선택
하위 요소 선택자	$("요소 선택 하위 요소")	선택 요소에 지정한 하위 요소 선택
자식 요소 선택자	$("요소 선택>자식 요소")	선택 요소를 기준으로 자식 관계에 지정한 요소만 선택
자식 요소들 선택자	$("요소 선택").children()	선택 요소의 모든 자식 요소 선택
형(이전) 요소 선택자	$("요소 선택").prev()	선택 요소의 이전 요소 선택
형(이전) 요소들 선택자	$("요소 선택").prevAll()	선택 요소의 이전 요소 모두 선택
지정 형(이전) 요소들 선택자	$("요소 선택").prevUntil("요소명")	선택 요소부터 지정한 요소의 이전 요소까지 모두 선택
동생(다음) 요소 선택자	$("요소 선택").next() $("요소 선택 + 다음 요소")	선택 요소의 다음 요소 선택
동생(다음) 요소들 선택자	$("요소 선택").nextAll()	선택 요소의 다음 요소 모두 선택
지정 동생(다음) 요소들 선택자	$("요소 선택").nextUntil("h2")	선택 요소부터 지정한 요소의 다음 요소까지 모두 선택
전체 형제 요소 선택자	$(".box_1").siblings()	class 값이 box_1인 요소의 형제 요소 전체 선택

 

---

< 3. 제이쿼리 탐색 선택자 >

• 탐색 선택자
  ➡ 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있다.
  
  
• (1) 위치 탐색 선택자
  : 배열의 인덱스를 사용해 선택
• (2) 속성 탐색 선택자
  : 배열에 담겨진 요소 중 지정된 속성과 값으로 선택
  
  

(1) 위치 탐색 선택자
$("요소 선택:first")  or $("요소 선택").first	선택 요소 중 첫 번째 요소만 선택
$("요소 선택:last")  or $("요소 선택").last	선택 요소 중 마지막 요소만 선택
$("요소 선택:odd")	선택 요소 중 짝수 번째(홀수 인덱스) 요소만 선택
$("요소 선택:even")	선택 요소 중 홀수 번째(짝수 인덱스) 요소만 선택
$("요소 선택:first-of-type")	선택 요소 중 첫 번째 요소만 선택
$("요소 선택:last-of-type")	선택 요소 중 마지막 요소만 선택
$("요소 선택:nth-child(숫자)")	선택 요소 중 n번째 요소만 선택
$("요소 선택:nth-child(숫자n)")	선택 요소 중 n의 배수 번째에 있는 요소만 선택
$("요소 선택:nth-last-of-type(숫자)")	선택 요소 중 마지막 위치로부터 n번째에 있는 요소만 선택
$("요소 선택:only-child")	부모 요소 내에 선택 요소가 1개 뿐인 선택 요소 선택
$("요소 선택:eq(index)") or $("요소 선택").eq(index)	선택 요소 중 인덱스 @가 참조하는 요소 불러오기
$("요소 선택:gt(index)")	선택 요소 중 인덱스 @보다 큰 인덱스가 참조하는 요소 불러오기
$("요소 선택:lt(index)")	선택 요소 중 인덱스 @보다 작은 인덱스가 참조하는 요소 불러오기
$("요소 선택").slice(index)	선택 요소 중 인덱스 @부터 참조하는 요소 불러오기

 

(2) 속성 탐색 선택자
$("요소 선택[속성]")	$("li[title]")	<li> 요소 중 title 속성이 포함된 요소만 선택
$("요소 선택[속성=값]")	$("li[title='리스트']")	<li> 요소 중 title 속성값이 '리스트'인 요소만 선택
$("요소 선택[속성^=텍스트]")	$("a[href^='http://']")	<li> 요소 중 href 속성값이 'http://'로 시작하는 요소만 선택
$("요소 선택[속성$=텍스트]")	$("a[href$='.com']")	<li> 요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택
$("요소 선택[href*=텍스트]")	$("a[href*='dorothy']")	<li> 요소 중 href 속성값 중 'dorothy'를 포함하는 요소만 선택
$("요소 선택:hidden")	$("li:hidden")	<li> 요소 중 숨겨져 있는 요소만 선택
$("요소 선택:visible")	$("li:visible")	<li> 요소 중 보이는 요소만 선택
$(".text")	-	<input> 요소 중 type 속성 값이 "text"인 요소만 선택
$(".selected")	-	selected 속성이 적용된 요소만 선택
$(".checked")	-	checked 속성이 적용된 요소만 선택

 

---

< 4. 객체 조작 >

• (1) 속성 조작 메서드
  : 요소의 속성을 바꿀 때 사용
• (2) 수치 조작 메서드
  : 요소의 너비값 또는 높잇값 같은 수치를 바꿀 때 사용
• (3) 객체 편집 메서드
  : 객체를 생성하거나 삭제 또는 복제할 때 사용
  
  

(1) 속성 조작 메서드
$("요소 선택").html(); $("요소 선택").html("새 요소");	선택 요소의 하위 요소 선택 요소의 하위 요소 모두 제거 후 새 요소 생성
$("요소 선택").text(); $("요소 선택").text("새 텍스트");	선택 요소가 감싸는 모든 텍스트 가져오기 선택 요소의 하위 요소 모두 제거 후 새 텍스트 생성
$("요소 선택").attr("속성명"); $("요소 선택").attr("속성명", "새 값");	선택 요소의 속성 값 가져오기 지정한 속성에 새 값 적용
$("요소 선택").removeAttr("속성명");	선택 요소의 지정한 속성만 제거
$("요소 선택").prop("상태 속성명"); $("요소 선택").prop("상태 속성명", "새 값");	선택 요소의 상태 속성값 가져오기 상태 속성에 새 값 적용
$("요소 선택").val(); $("요소 선택").val("새 값");	선택 요소의 value 값 가져오기 value 속성에 새 값 적용
$("요소 선택").css("속성명"); $("요소 선택").css("속성명", "새 값");	선택 요소의 지정 스타일 속성값 가져오기 스타일 속성에 새 값 적용
$("요소 선택").addClass("class 값");	선택 요소의 class 속성에 새 값 추가
$("요소 선택").removeClass("class 값");	선택 요소의 class 속성에 지정한 값만 제거
$("요소 선택").toggleClass("class 값");	선택 요소의 class 값에 지정한 값이 포함되어 있으면 제거, 없으면 추가
$("요소 선택").hasClass("class 값");	선택 요소의 class 값에 지정한 클래스 값이 포함되어 있으면 true를 없으면 false를 반환

 

(2) 수치 조작 메서드
$("요소 선택").height(); $("요소 선택").height(100);	안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환
$("요소 선택").width(); $("요소 선택").width(100);	안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환
$("요소 선택").innerHeight(); $("요소 선택").innerHeight(100);	안쪽 여백을 포함한 높잇값을 반환하거나 변환
$("요소 선택").innerWidth(); $("요소 선택").innerWidth(100);	안쪽 여백을 포함한 너빗값을 반환하거나 변환
$("요소 선택").outerHeight(); $("요소 선택").outerHeight(100);	선과 안쪽 여백을 포함한 높잇값을 반환하거나 변환
$("요소 선택").outerWidth(); $("요소 선택").outerWidth(100);	선과 안쪽 여백을 포함한 너빗값을 반환하거나 변환
$("요소 선택").position().left; $("요소 선택").position().top;	선택 요소의 포지션 위칫값 반환
$("요소 선택").offset().left; $("요소 선택").offset().top;	선택 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지에 대한 값 반환
$(window).scrollLeft();	브라우저의 수평 스크롤 이동 높잇값 반환
$(window).scrollTop();	브라우저의 수직 스크롤 이동 너빗값 반환

 

(3) 객체 편집 메서드
$("요소 선택").before("새 요소"); $("새 요소").insertBefore("요소 선택");	선택 요소의 이전 위치에 새 요소 추가
$("요소 선택").after("새 요소"); $("새 요소").insertAfter("요소 선택");	선택 요소의 다음 위치에 새 요소 추가
$("요소 선택").append("새 요소"); $("새 요소").appendTo("요소 선택");	선택 요소의 마지막 위치에 새 요소 추가
$("요소 선택").prepend("새 요소"); $("새 요소").prependTo("요소 선택");	선택 요소의 맨 앞 위치에 새 요소 추가
$("요소 선택").clone(true or false);	선택 문서 객체를 복제 인자값이 true ➡ 하위 요소까지 모두 복제 false ➡ 선택한 요소만 복제
$("요소 선택").empty();	선택 요소의 하위 내용들 모두 삭제
$("요소 선택").remove();	선택 요소를 삭제
$("요소 선택").replaceWith("새 요소"); $("새 요소").replaceAll("요소 선택");	선택 요소들을 새 요소로 교체
$("요소 선택").unwrap();	선택 요소의 부모 요소를 삭제
$("요소 선택").wrap(새 요소);	선택 요소를 새 요소로 각각 감싸기
$("요소 선택").wrapAll();	선택 요소를 새 요소로 한꺼번에 감싸기
$("요소 선택").wrapInner(새 요소);	선택 요소의 내용을 새 요소로 각각 감싸기