jQuery는 HTML 요소들을 쉽게 선택하고 조작할 수 있는 자바스크립트 라이브러리입니다. 이를 사용하면 멀티미디어 요소인 이미지, 비디오, 오디오 등을 쉽게 선택하고 다양한 동작을 수행할 수 있습니다.

이미지 조작하기

이미지를 jQuery로 제어하기 위해서는 해당 이미지의 선택자를 사용해야 합니다. 일반적으로 이미지는 img 태그로 표시되기 때문에 $('img')와 같은 형태로 선택할 수 있습니다.

이미지 속성 변경하기

이미지의 크기, 속성, 스타일 등을 변경하기 위해서는 attr 메서드를 사용할 수 있습니다. 아래 예제는 id가 “myImage”인 이미지의 속성 중 src을 변경하는 예제입니다.

$('#myImage').attr('src', 'newImage.jpg');

이미지 숨기기 및 표시하기

이미지를 화면에서 숨기고 표시하기 위해서는 hide와 show 메서드를 사용할 수 있습니다. 아래 예제는 id가 “myImage”인 이미지를 클릭했을 때 이미지가 숨겨지는 예제입니다.

$('#myImage').click(function() {
  $(this).hide();
});

비디오 조작하기

비디오는 <video> 태그로 표시되기 때문에 동일한 방식으로 비디오를 선택하고 조작할 수 있습니다.

비디오 재생 및 일시정지

비디오의 재생과 일시정지는 play와 pause 메서드를 사용하여 제어할 수 있습니다. 아래 예제는 id가 “myVideo”인 비디오를 클릭했을 때 비디오를 재생 또는 일시정지하는 예제입니다.

$('#myVideo').click(function() {
  if ($(this)[0].paused) {
    $(this)[0].play();
  } else {
    $(this)[0].pause();
  }
});

오디오 조작하기

오디오 역시 <audio> 태그로 표시되며, 비디오와 동일한 방식으로 선택하고 조작할 수 있습니다.

오디오 컨트롤 제어

오디오의 재생, 일시정지, 음량 조절 등을 제어하려면 play, pause, volume 등의 메서드를 사용할 수 있습니다. 아래 예제는 id가 “myAudio”인 오디오를 클릭했을 때 음악이 재생 또는 일시정지되는 예제입니다.

$('#myAudio').click(function() {
  if ($(this)[0].paused) {
    $(this)[0].play();
  } else {
    $(this)[0].pause();
  }
});

결론

이렇게 jQuery를 사용하여 멀티미디어 요소를 선택하고 조작할 수 있습니다. jQuery는 간편한 사용법과 다양한 메서드를 제공하여 웹 개발을 더욱 효율적으로 할 수 있도록 도와줍니다. jQuery 공식 사이트를 참고하여 더 많은 기능을 확인해보세요.

참고 자료

• jQuery 공식 사이트
• w3schools jQuery Tutorial