DevSSOM
jQuery 이벤트 - Hide, Show, Toggle 이벤트 본문
반응형
Hide, Show, Toggle 이벤트
다음 제이쿼리 이벤트를 사용하여 특정 HTML 영역을 보이거나 감출 수 있음.
$("h1").hide(); // 특정 영역을 감추기
$("h1").show(); // 특정 영역을 보여줄 때
$("h1").toggle(); // hide와 show 두 기능을 전부 가지고 있는 형태
실습문제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>제이쿼리 기초</title>
</head>
<body>
<h1 style="text-align: center">Hello jQuery</h1>
<button id="hide">hide</button>
<button id="show">show</button>
<button id="toggle">toggle</button>
<script src="jquery-3.3.1.js"></script>
<script src="index.js"></script>
</body>
</html>이런 HTML 문서가 있을 때, 제이쿼리로 index.js라는 파일을 만들어서 코드를 작성. 가장 먼저, hide 버튼을 클릭해서 h1인 'Hello jQuery'가 사라지게 만들면,
$(function() {
$("#hide").click(function() {
$("h1").hide();
});
});
이때, hide() 이벤트를 적용하면 영역 자체가 사라지므로, 레이아웃이 틀어지는 점을 유의.
이번엔 사라졌던 h1이 다시 나타나게 만들어주려면, show 버튼 기능을 넣어줘.
$(function() {
$("#hide").click(function() {
$("h1").hide();
});
$("#show").click(function() {
$("h1").show();
});
});토글 버튼을 클릭하면 사라졌다 나타났다 할 수 있게 만들면
$(function() {
$("#hide").click(function() {
$("h1").hide();
});
$("#show").click(function() {
$("h1").show();
});
$("#toggle").click(function() {
$("h1").toggle();
});
});
실제 이 제이쿼리 이벤트들이 어떻게 동작하는지를 크롬 개발자도구 요소검사로 확인해보면
지금 이 상태에선 <h1> 태그에 text-align: center; 밖에 없었는데, hide 버튼을 누르게 되면
<h1> 태그에 display: none; 값이 추가되는 걸 볼 수 있어. 이 display: none; 때문에 <h1> 태그가 사라지게 되는거야. 그리고 다시 show 버튼을 누르면 display: none; 이 없어지면서 h1이 다시 우리 눈에 보이게 되고. 토글 버튼도 마찬가지 원리.
제이쿼리에서 제공하는 이런 이벤트들을 사용하면, 지금처럼 내가 지정한 HTML 영역에 접근을 해서 CSS속성을 추가하고 빼는 것 같은 기능 구현을 알아서 다 해줘. 그래서 우리는 추가적인 작업을 할 필요없이 제이쿼리에서 제공하는 치트키만 잘 알게되도 복잡한 기능들을 쉽게 구현해낼 수 있음.
728x90
반응형
'JavaScript > jQuery' 카테고리의 다른 글
| jQuery 이벤트 - Fade 이벤트 (0) | 2021.07.18 |
|---|---|
| jQuery 이벤트 - Mouse 이벤트 (0) | 2021.07.15 |
| jQuery 선택자 (0) | 2021.07.14 |
| jQuery 왜 쓸까? (0) | 2021.07.14 |
| jQuery - this (0) | 2021.07.11 |
'JavaScript/jQuery' 관련 글
more
댓글