코밍이의 하루

[JQuery] 선택자 본문

웹언어 공부/JQuery

[JQuery] 선택자

코밍이 2021. 8. 17. 12:50

1. 개발 환경

구분 내용
사용 언어 HTML5, JS, jQuery
개발환경 Visual Studio Code
참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문
웹브라우저 Chrome

2. 주요 문법

1) 선택자

- HTML 요소를 선택하여 가져온다.

 

2) 제이쿼리 선택자

- 선택한 요소의 디자인 속성을 적용할 때 사용

- '동적' 스타일 적용

-  $()에 문자형 데이터로 CSS 선택자를 입력

기본형
① 선택한 요소에 지정한 스타일 적용
$("CSS 선택자").css("스타일 속성명", "값");

② 선택한 요소에 지정한 속성 적용
$("CSS 선택자").attr("속성명", "값");

 

3) 문서 객체 모델(DOM : Document Object Model)

- HTML 문서 객체 구조

- 최상위 객체 <html> , 하위 객체 <head>, <body>

- <body> 태그 : 문단태그, 테이블태그, 폼 태그 등 포함

- 모든 태그를 객체라고 부름

- 태그에는 기능과 속성 포함

(ex. <img> 태그는 이미지를 출력하는 기능이 있고 src, alt, width, height 와 같은 속성 포함)

 

4) 기본 선택자

- <body> 영역에 있는 문서 객체를 선택할 수 있는 선택자

구분 종류 사용법 설명
직접
선택자		 전체 선택자 $("*") 모든 요소 선택
아이디 선택자 $("#아이디명") id 속성에 지정한 값을 가진 요소 선택
클래스 선택자 $(".클래스명") class 속성에 지정한 값을 가진 요소 선택
요소 선택자 $("요소명") 지정한 요소명과 일치하는 요소들만 선택
그룹 선택자 $("선택 1, 선택 2, ... 선택 n") 선택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. 소스 코드 및 실행 결과

- jq_sample1_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title> 선택자 </title>  
    <script src="js/jquery.js"></script>
    <script>
      $(function(){
        $("#title").css("color","red");
      })
    </script>
  </head>
  <body>
    <p id="title">제목</p>
  </body>
</html>

 

jq_sample1_test.html

 

저작자표시 비영리 변경금지

'웹언어 공부 > JQuery' 카테고리의 다른 글

[JQuery] jQuery 배열 메소드  (0) 2021.08.18
[JQuery] 탐색 선택자 - 위치 탐색 선택자  (0) 2021.08.17
[JQuery] 선택자 - 인접 관계 선택자  (0) 2021.08.17
[JQuery] 선택자 - 직접선택자  (0) 2021.08.17
[JQuery] 제이쿼리 기본 다지기  (0) 2021.08.17
'웹언어 공부/JQuery' Related Articles more