[jQuery] 선택자 종류

프레임워크/JS(+jQuery)

[jQuery] 선택자 종류

은돌1113 2022. 4. 18. 11:56

[Jquery] 제이쿼리 선택자 : 직접 선택자 (전체 선택자/아이디 선택자/클래스 선택자/태그 선택자/

안녕하세요. 이번 포스팅에서는 제이쿼리(jquery) 선택자 중 직접 선택자에 대해서 알아보도록 하겠습니다. 선택자는 HTML 요소를 선택하여 가져옵니다. jquery에서 선택자는 CSS와 마찬가지로 가져

lktprogrammer.tistory.com

제이쿼리(jQuery) 선택자 - #1

1. 기본 선택자 - $('h1').css('color', 'red'); - ('h1') 선택자와, css('color', 'red') 메서드 - 문서 객체를 다룰 때 사용하는 형태 - CSS 선택자와 유사 1.1. 전체 선택자 (Wildcard Selector) - * - HTML..

gangzzang.tistory.com

1. 전체 선택자 (*)

: 전체 선택자는 HTML 요소 전체를 선택하는 선택자입니다. HTML 문서 내에 정의 도힌 모든 태그를 선택합니다.

전체 선택자의 기본 형태는 아래와 같습니다.

$("*");

아래 예제에서는 *(전체 선택자)를 사용하여 모든 요소의 color를 blue로 변경합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 연습</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <h1 id="title">선택자 종류</h1>
    <h2 class="hello">Hello World</h2>
    <p>2022.04.18</p>
    <script>
      $("*").css("color", "blue");
    </script>
  </body>
</html>

2. 아이디 선택자 (Id Selector)

: 아이디 선택자는 id 속성에 지정한 값을 포함하는 모든 요소를 선택합니다.

아이디 선택자의 기본 형태는 다음과 같습니다.

$("#id 속성값");

아래 예제에서는 id 속성값으로 title을 가지고 있는 요소의 color를 red로 변경합니다.

(. css를 사용하면 CSS를 변경할 수 있습니다.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 연습</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <h1 id="title">선택자 종류</h1>
    <h2>Hello World</h2>
    <p>2022.04.18</p>
    <script>
      $("#title").css("color", "red");
    </script>
  </body>
</html>

3. 클래스 선택자 (Class Selector)

: 클래스 선택자는 class 속성에 지정한 값을 포함한 모든 요소를 선택합니다.

클래그 선택자의 기본 형태는 다음과 같습니다.

$(".클래스 속성값");

아래 예제에서는 class 속성값으로 hello를 가지고 있는 요소의 text를 Hello로 변경합니다.

(. text를 사용하면 태그 안에 text를 변경할 수 있습니다.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 연습</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <h1 id="title">선택자 종류</h1>
    <h2 class="hello">Hello World</h2>
    <p>2022.04.18</p>
    <script>
      $(".hello").text("Hello");
    </script>
  </body>
</html>

4. 태그 선택자 (Tag Seletor)

: 태그 선택자는 지정한 요소명(태그명)과 일치하는 모든 요소를 선택하는 선택자입니다.

태그 선택자의 기본 형태는 아래와 같습니다.

$("요소명(태그명)");

아래 예제에서는 p 태그의 font-size를 변경합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 연습</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <h1 id="title">선택자 종류</h1>
    <h2 class="hello">Hello World</h2>
    <p>2022.04.18</p>
    <script>
      $("p").css("font-size", "50px");
    </script>
  </body>
</html>

5. 그룹 선택자 (,)

: 그룹 선택자는 여러 개의 요소를 각각 다른 선택자를 사용하여 한꺼번에 선택할 수 있는 선택자입니다.

그룹 선택자의 기본 형태는 아래와 같습니다.

 $("p, #title, .hello");

아래 예제에서는 그룹 선택자를 사용하여 color를 변경합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 연습</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <h1 id="title">선택자 종류</h1>
    <h2 class="hello">Hello World</h2>
    <p>2022.04.18</p>
    <script>
      $("p, #title, .hello").css("background", "tomato");
    </script>
  </body>
</html>

6. 자손(자식) 선택자 (>)

: 자손 선택자는 말 그대로 자손(자식)을 선택 할 수 있는 선택자로써 (요소 A > 요소 B 형태로 사용합니다.)

자손 선택자의 기본 형태는 아래와 같습니다.

$("부모 요소(태그) > 자식 요소(태그)");

아래 예제에서는 자손(자식) 선택자를 사용하여 color를 변경합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 연습</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <div class="parent">
      부모 요소
      <div class="child">
        자손(자식) 요소
        <div class="grandChild">후손(손자) 요소</div>
      </div>
    </div>
    <script>
      $(".parent > .child").css("color", "red");
    </script>
  </body>
</html>

7. 후손(손자) 선택자 ( )

: 후손 선택자는 말 그대로 후손(손자)을 선택 할 수 있는 선택자로써 (요소 A 요소 B 형태로 사용합니다.)

후손 선택자의 기본 형태는 아래와 같습니다.

$("부모 요소(태그) 후손 요소(태그)");

아래 예제에서는 후손(손자) 선택자를 사용하여 color를 변경합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 연습</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <div class="parent">
      부모 요소
      <div class="child">
        자손(자식) 요소
        <div class="grandChild">후손(손자) 요소</div>
      </div>
    </div>
    <script>
      $(".parent .grandChild").css("color", "red");
    </script>
  </body>
</html>