[JQuery] Event

 

마우스, 키보드 이벤트 외에 엘리먼트 속성을 다루는 이벤트에 대해서 알아보도록 하겠습니다.

 

 

1. 샘플 예제

 

테스트를 하기 위해 아래와 같이 예제를 만들었습니다.

 

<html>
<head>
    <title>에프에이리눅스</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <img id="testImg" src=""sample.png" />
    <button id="btnClick">버튼</button>
</body>
</html>

<script>
$(function() {
    // 스크립트를 넣을 부분
});
</script>

 

 

2. hide()

 

hide 는 말 그대로 엘리먼트를 숨길 때, 사용합니다.

아래와 같이 지정하면 페이지 시작과 동시에 엘리먼트를 숨길 수 있습니다.

 

$('#testImg').hide();

 

hide 와 다음에 배울 show는 애니메이션을 시간을 정할 수 있습니다.

아래와 같이 버튼을 클릭했을 때, 이미지가 사라지게 하는 내용입니다.

slow 로 지정하면 600ms 동안 사라지는 애니메이션을 볼 수 있습니다.

 

$('#btnClick').click(function() {
    $('#testImg').hide('slow', function() {
    });
});

 

 

3. show()

 

show는 hide 와 반대로 나타날 때, 사용됩니다.

아래와 같이 지정하면 페이지 시작과 동시에 엘리먼트를 표시할 수 있습니다.

기본적으로는 페이지의 엘리먼트가 보이고 있기 때문에, 달라지는건 없습니다.

 

$('#testImg').show();

 

아래와 같이 버튼을 클릭했을 때, 이미지가 나타나게 하는 내용입니다.

fast 로 지정하면 200ms 동안 애니메이션을 볼 수 있습니다. 정하지 않았을 경우에는 400ms 정도 애니메이션이 나타납니다.

 

$('#btnClick').click(function() {
    $('#testImg').show('fast', function() {
    });
});

 

 

4. toggle()

 

toggle 은 한번 누르면 선택되고 다시 한번 누르면 해제가 되는 것을 나타냅니다.

 

아래는 버튼을 클릭했을 때, 이미지를 토글 상태로 나타낸 것입니다.

버튼을 한번 클릭하면 이미지는 사라지고, 버튼을 다시 한번 클릭하면 이미지는 나타납니다.

 

$('#btnClick').click(function() {
    $('#testImg').toggle();
});

 

 

^ㅇ^!!!

 

show, hide 는 style에서 display 에 속성을 주어서 선택을 했었는데, jquery를 사용함으로써 더 편리하게 사용할 수 있습니다.

 
이 게시물을...