코밍이의 하루

[JQuery] 선택자 - 직접선택자 본문

웹언어 공부/JQuery

[JQuery] 선택자 - 직접선택자

코밍이 2021. 8. 17. 14:01

1. 개발 환경

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

2. 주요 문법

1) 직접 선택자

- 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자

- 종류 : 전체(*), 아이디(#), 클래스(.), 요소명, 그룹(,) 선택자

 

1-1) 전체 선택자

- 전체 요소를 선택할 때 사용

- 현재 HTML의 모든 태그 선택

기본형
$("*")

1-2) 아이디 선택자

- 아이디 속성에 지정한 값을 포함하는 요소 선택

기본형
$("#아이디명")

1-3) 클래스 선택자

- 클래스 속성에 지정한 값을 포함한 요소 선택

기본형
$(".클래스명")

1-4) 요소명 선택자

- 지정한 요소명과 일치하는 요소를 모두 선택

기본형
$("요소명")

1-5) 그룹 선택자

- 한 번에 여러 개의 요소를 선택할 때 사용

기본형
$("요소 선택1, 요소 선택 2, ... 요소 선택 n")

1-6) 종속 선택자

- 선택한 요소의 id 또는 class 값이 일치하는 요소를 선택할 때 사용

기본형
$("요소명#id 값")
$("요소명.class 값")

 

3. 소스 코드 및 실행 결과

- jq_selec1_1_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title> 선택자 </title>  
    <script src="js/jquery.js"></script>
    <script>
      $(function(){
          $("*").css("border","1px solid blue");
      });
    </script>
  </head>
  <body>
      <h1>제이쿼리</h1>
      <h2>선택자</h2>
      <h3>직접 선택자</h3>
  </body>
</html>

jq_selec1_1_test.html

- jq_selec1_2_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title> 선택자 </title>  
    <script src="js/jquery.js"></script>
    <script>
      $(function(){
          $("#tit").css("background-color","#ff0")
          .css("border", "2px solid #f00");
          //체이닝 기법으로 선택한 요소의 css 메서드를 연속해서 2회 적용
      });
    </script>
  </head>
  <body>
      <h1>제이쿼리</h1>
      <h2 id="tit">선택자</h2>
      <h3>직접 선택자</h3>
  </body>
</html>

※ 체이닝 기법 : 선택한 요소에 메소드를 연속해서 사용하는 것

jq_selec1_2_test.html

- jq_selec1_3_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title> 선택자 </title>  
    <script src="js/jquery.js"></script>
    <script>
      $(function(){
          $(".tit").css("background-color","#ff0")
          .css("border","2px dashed #f00");
      });
    </script>
  </head>
  <body>
      <h1>제이쿼리</h1>
      <h2 class="tit">선택자</h2>
      <h3>직접 선택자</h3>
  </body>
</html>

jq_selec1_3_test.html

- jq_selec1_4_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title> 선택자 </title>  
    <script src="js/jquery.js"></script>
    <script>
      $(function(){
          $("h2").css("background-color", "#0ff")
          .css("border","2px dashed #f00");	
      });
    </script>
  </head>
  <body>
      <h1>제이쿼리</h1>
      <h2>선택자</h2>
      <h3>직접 선택자</h3>
  </body>
</html>

 jq_selec1_4_test.html

- jq_selec1_5_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title> 선택자 </title>  
    <script src="js/jquery.js"></script>
    <script>
      $(function(){
          $("#tit3,h1").css("background-color","#0ff")
          .css("border","2px dashed #f00");
      });
    </script>
  </head>
  <body>
      <h1>제이쿼리</h1>
      <h2>선택자</h2>
      <h3 id="tit3">직접 선택자</h3>
      <h3>인접 선택자</h3>
  </body>
</html>

jq_selec1_5_test.html

- jq_selec1_6_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title> 선택자 </title>  
    <script src="js/jquery.js"></script>
    <script>
      $(function(){
          $("h1.tit").css("background-color","#0ff")
          .css("border","2px dashed #f00");
      });
    </script>
  </head>
  <body>
      <h1 class="tit">제이쿼리</h1>
      <h2>선택자</h2>
      <h3 class="tit">직접 선택자</h3>
  </body>
</html>

jq_selec1_6_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