SeouliteLab

jQuery 속성값이 특정 문자열을 포함하는 요소 선택자 [name*=”value”] 본문

프로그래밍

jQuery 속성값이 특정 문자열을 포함하는 요소 선택자 [name*=”value”]

Seoulite Lab 2024. 4. 9. 08:53

예제 1: 특정 문자열을 포함하는 속성값을 가진 요소 선택

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 속성값이 특정 문자열을 포함하는 요소 선택자 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("[href*='example']").css("color", "blue");
    });
  </script>
</head>
<body>
  <a href="https://example.com">예시 링크</a>
  <a href="https://example.net">다른 링크</a>
</body>
</html>

설명:

이 예제는 jQuery의 속성값이 특정 문자열을 포함하는 요소를 선택하는 방법을 보여줍니다.

  • $("[href*='example']")는 href 속성값에 "example"이라는 문자열이 포함된 모든 요소를 선택합니다.
  • 선택된 요소에 CSS를 적용하여 색상을 파란색으로 변경합니다.

예제 2: 특정 문자열을 포함하는 요소에 이벤트 추가

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 속성값이 특정 문자열을 포함하는 요소 선택자 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("[href*='example']").click(function(){
        alert("예시 링크를 클릭했습니다.");
      });
    });
  </script>
</head>
<body>
  <a href="https://example.com">예시 링크</a>
  <a href="https://example.net">다른 링크</a>
</body>
</html>

설명:

이 예제는 jQuery의 속성값이 특정 문자열을 포함하는 요소에 클릭 이벤트를 추가하는 방법을 보여줍니다.

  • $("[href*='example']")는 href 속성값에 "example"이라는 문자열이 포함된 모든 요소를 선택합니다.
  • 예시 링크를 클릭하면 알림창이 뜨도록 이벤트를 추가합니다.

예제 3: 특정 문자열을 포함하는 요소에 클래스 추가

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 속성값이 특정 문자열을 포함하는 요소 선택자 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("[href*='example']").addClass("highlight");
    });
  </script>
  <style>
    .highlight {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <a href="https://example.com">예시 링크</a>
  <a href="https://example.net">다른 링크</a>
</body>
</html>

설명:

이 예제는 jQuery의 속성값이 특정 문자열을 포함하는 요소에 클래스를 추가하는 방법을 보여줍니다.

  • $("[href*='example']")는 href 속성값에 "example"이라는 문자열이 포함된 모든 요소를 선택합니다.
  • 선택된 요소에 "highlight" 클래스를 추가하여 글꼴을 굵게 만듭니다.

jQuery의 속성값이 특정 문자열을 포함하는 요소 선택자를 사용하면 원하는 패턴을 가진 요소를 효과적으로 선택할 수 있습니다. 위 예제들을 참고하여 다양한 상

황에서 이 선택자를 활용해보세요.

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

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

파이썬 strptime 함수: 문자열을 날짜/시간 객체로 변환하기  (0) 2024.04.09
jQuery 속성값이 특정 단어를 포함하는 요소 선택자 [name~="value"]  (0) 2024.04.09
jQuery 속성값이 특정 접두사를 포함하는 요소 선택자 [name|=”value”]  (0) 2024.04.09
jQuery :animated Selector - 애니메이션 중인 요소를 선택하여 조작  (0) 2024.04.09
jQuery All Selector (“*”)를 이용한 요소 선택  (0) 2024.04.09
'프로그래밍' Related Articles more