SeouliteLab

jQuery의 :image 선택자 활용하기 본문

프로그래밍

jQuery의 :image 선택자 활용하기

Seoulite Lab 2024. 4. 12. 08:08

jQuery의 :image 선택자는 문서 내에서 이미지 요소를 선택하는 데 사용됩니다. 이미지 요소는 <img> 태그로 정의되며, 이를 활용하여 이미지를 선택하고 스타일을 변경하거나 이벤트를 추가할 수 있습니다.

예제 1: 이미지 요소에 마우스 오버 이벤트 추가하기

<!DOCTYPE html>
<html>
<head>
  <title>이미지 요소에 마우스 오버 이벤트 추가하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(":image").hover(function(){
        $(this).css("opacity", "0.8");
      }, function(){
        $(this).css("opacity", "1");
      });
    });
  </script>
  <style>
    img {
      width: 200px;
      height: auto;
    }
  </style>
</head>
<body>
  <img src="image1.jpg" alt="이미지 1">
  <img src="image2.jpg" alt="이미지 2">
</body>
</html>

설명: 위 예제는 문서 내의 모든 이미지 요소에 마우스를 올리면 투명도가 낮아지고 마우스를 벗어나면 다시 투명도가 원래대로 돌아갑니다.

예제 2: 이미지 요소에 클릭 이벤트 추가하기

<!DOCTYPE html>
<html>
<head>
  <title>이미지 요소에 클릭 이벤트 추가하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(":image").click(function(){
        alert("이미지가 클릭되었습니다!");
      });
    });
  </script>
</head>
<body>
  <img src="image1.jpg" alt="이미지 1">
  <img src="image2.jpg" alt="이미지 2">
</body>
</html>

설명: 이 예제는 문서 내의 모든 이미지 요소를 클릭하면 알림창이 뜨는 이벤트를 추가합니다.

예제 3: 이미지 요소에 클래스 추가하기

<!DOCTYPE html>
<html>
<head>
  <title>이미지 요소에 클래스 추가하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(":image").addClass("image-style");
    });
  </script>
  <style>
    .image-style {
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <img src="image1.jpg" alt="이미지 1">
  <img src="image2.jpg" alt="이미지 2">
</body>
</html>

설명: 이 예제는 모든 이미지 요소에 image-style 클래스를 추가하여 테두리를 파란색으로 만듭니다.

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

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

jQuery의 :lang() 선택자 활용하기  (0) 2024.04.12
jQuery의 :input 선택자 활용하기  (0) 2024.04.12
jQuery의 ID 선택자 ("#id") 활용하기  (0) 2024.04.12
jQuery의 :hidden 선택자 활용하기  (0) 2024.04.12
jQuery의 :header 선택자 활용하기  (0) 2024.04.12
'프로그래밍' Related Articles more