SeouliteLab

jQuery의 다중 선택자 활용하기 본문

프로그래밍

jQuery의 다중 선택자 활용하기

Seoulite Lab 2024. 4. 12. 08:15

jQuery의 다중 선택자인 (“selector1, selector2, selectorN”)는 여러 개의 선택자를 한 번에 선택하여 조작할 수 있는 기능을 제공합니다. 이를 활용하면 동시에 여러 요소를 선택하여 스타일을 변경하거나 이벤트를 추가할 수 있습니다.

예제 1: 여러 클래스를 가진 요소 선택하기

<!DOCTYPE html>
<html>
<head>
  <title>다중 선택자 활용 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(".class1, .class2").css("color", "red");
    });
  </script>
</head>
<body>
  <p class="class1">이 요소는 class1을 가집니다.</p>
  <p class="class2">이 요소는 class2를 가집니다.</p>
  <p class="class3">이 요소는 class3을 가집니다.</p>
</body>
</html>

설명: 위 예제는 class1 또는 class2를 가진 요소의 글꼴 색상을 빨간색으로 변경합니다.

예제 2: 여러 태그를 한 번에 선택하기

<!DOCTYPE html>
<html>
<head>
  <title>다중 선택자 활용 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("h1, h2, h3").css("font-style", "italic");
    });
  </script>
</head>
<body>
  <h1>제목 1</h1>
  <h2>제목 2</h2>
  <h3>제목 3</h3>
  <p>이 요소는 p 태그입니다.</p>
</body>
</html>

설명: 이 예제는 h1, h2, h3 태그를 모두 선택하여 글꼴을 기울임체로 만듭니다.

예제 3: ID와 클래스를 동시에 가진 요소 선택하기

<!DOCTYPE html>
<html>
<head>
  <title>다중 선택자 활용 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#username, .required").css("border", "2px solid blue");
    });
  </script>
</head>
<body>
  <input type="text" id="username" class="required" placeholder="사용자 이름">
  <input type="email" class="required" placeholder="이메일">
  <input type="password" placeholder="비밀번호">
</body>
</html>

설명: 이 예제는 ID가 "username"이거나 클래스가 "required"인 요소를 선택하여 파란색 테두리를 추가합니다.

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

'프로그래밍' 카테고리의 다른 글

jQuery의 다음 형제 선택자 활용하기  (0) 2024.04.12
jQuery의 인접 형제 선택자 활용하기  (0) 2024.04.12
jQuery의 다중 속성 선택자 활용하기  (0) 2024.04.12
jQuery의 :lt() 선택자 활용하기  (0) 2024.04.12
jQuery의 :last 선택자 활용하기  (0) 2024.04.12
'프로그래밍' Related Articles more