새소식
반응형
WEB/jQuery
[jQuery] 제이쿼리 hide / show 메소드 알아보기
- -
반응형
2021-04-14
jquery에서 제공하는 효과 중 hide와 show 메서드가 존재한다. 메서드 이름에도 느껴지듯이 지정된 객체를 숨기고 드러내는 역할을 한다.
- 예제 1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide() // hide 버튼 클릭시 div 태그 숨김
})
$("#show").click(function(){
$("div").show() // show 버튼 클릭시 div 태그 보여줌
})
})
</script>
</head>
<body>
<div>-----Hello World-----</div>
<button type="button" id="hide">hide</button>
<button type="button" id="show">show</button>
</body>
</html>
위의 예제 코드는 hide 의 클릭이벤트 발생 시에는 div 태그 내용을 숨기고, show의 클릭이벤트 발생 시 div 태그를 다시 나타내는 태그이다.
show를 눌렀을 경우
hide를 눌렀을 경우
- 추가사항
show 와 hide 에는 매개 값없이 사용하는 방법도 있지만 아래와 같이 두 가지 매개 값을 받을 수 있다. 첫 번째는 해당 메서드가 실행되는 속도이며, 두 번째는 콜백 함수이다.
$(selector). hide(속도, 콜백함수);
$(selector). show(속도, 콜백함수);
아래는 예제 코드이니 참고하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide(1000, function(){
console.log("Bye") // 숨겨짐과 동시에 Bye가 콘솔창에 남게된다.
}) // hide 버튼 클릭시 div 태그 숨김
})
$("#show").click(function(){
$("div").show(1000) // show 버튼 클릭시 div 태그 보여줌
})
})
</script>
</head>
<body>
<div>-----Hello World-----</div>
<button type="button" id="hide">hide</button>
<button type="button" id="show">show</button>
</body>
</html>
메인 이미지 출처: Photo by Marcos Paulo Prado on Unsplash
반응형
'WEB > jQuery' 카테고리의 다른 글
| [jQuery] ajax로 window.location.href = "CSV 파일 다운로드" 구현 (0) | 2023.06.06 |
|---|---|
| [jQuery] 제이쿼리를 slideToggle을 사용법 알아보기. (0) | 2021.05.01 |
| [jQuery] 제이쿼리를 이용한 href(링크) 부여 attr/location (1) | 2021.04.17 |
| [jQuery] 제이쿼리 append 와 after 차이 알아보기 (0) | 2021.03.31 |
| [jQuery] 제이쿼리 button click trigger / enter key event (0) | 2021.03.24 |
Contents
소중한 공감 감사합니다