SeouliteLab

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

프로그래밍

jQuery의 다중 속성 선택자 활용하기

Seoulite Lab 2024. 4. 12. 08:14

jQuery의 다중 속성 선택자인 [name="value"][name2="value2"]는 여러 개의 속성 조건을 동시에 만족하는 요소를 선택하는 데 사용됩니다. 이 선택자를 활용하면 웹 페이지에서 특정한 속성 값 조합을 가진 요소를 선택하여 조작할 수 있습니다.

예제 1: 클래스와 데이터 속성을 동시에 가진 요소 선택하기

<!DOCTYPE html>
<html>
<head>
  <title>다중 속성 선택자 활용 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("[data-category='fruit'][data-color='red']").css("font-weight", "bold");
    });
  </script>
</head>
<body>
  <div data-category="fruit" data-color="red">사과</div>
  <div data-category="fruit" data-color="green">바나나</div>
  <div data-category="vegetable" data-color="red">토마토</div>
</body>
</html>

설명: 위 예제는 데이터 속성이 "fruit"이고 색상이 "red"인 요소를 선택하여 글꼴을 굵게 만듭니다.

예제 2: 태그와 클래스를 동시에 가진 요소 선택하기

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

설명: 이 예제는 태그가 input이고 클래스가 "required"인 요소를 선택하여 빨간색 테두리를 추가합니다.

예제 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[type='text']").css("background-color", "lightblue");
    });
  </script>
</head>
<body>
  <input type="text" id="username" placeholder="사용자 이름">
  <input type="password" id="password" placeholder="비밀번호">
</body>
</html>

설명: 이 예제는 ID가 "username"이고 태그가 input인 요소를 선택하여 배경색을 연보라색으로 변경합니다.

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

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

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