728x90
show()와 hide()
See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script> $().ready(function(){ $('#btn1').click(function(){ $('input[type="text"]').show(); }); $('#btn2').click(function(){ $('input[type="text"]').hide(); }); }); </script> </head> <body> <button id="btn1">보이기</button> <button id="btn2">숨기기</button><br><br> <div> <input type="text" placeholder="보이기 숨기기를 눌러보세요."> </div> </body> </html> | cs |
$().ready(function(){ ... });
이 부분은 문서가 로드될 때 실행할 JavaScript 코드를 정의하는 부분이다.
$().ready(...) 또는 $(document).ready(...)와 같이 사용되며, 페이지가 완전히 로드되었을 때 내용을 실행다.
$('#btn1').click(function(){ ... });
"보이기" 버튼(#btn1)이 클릭되었을 때 실행할 코드를 정의한다.
이 코드는 텍스트 입력 필드를 선택하여 show() 메서드 or hide() 메서드를 호출하여 표시한다.
toggle(), slideup(), fade()
See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $().ready(function(){ //slideup(speed):speed값을 지정해서 슬라이드업 효과 //speed:"slow","fast" or milliseconds(1/1000초의 의미) $('#btn1').click(function(){ $('#img').slideUp(1000); }); $('#btn2').click(function(){ $('#img').slideDown(1000); }); $('#btn3').click(function(){ $('img').fadeIn(1000); }); $('#btn4').click(function(){ $('img').fadeOut(1000); }); $('#btn5').click(function(){ $('img').slideToggle(1000); }); $('#btn6').click(function(){ $('img').toggle(1000); }); $('#btn7').click(function(){ $('img').show(3000).fadeOut(3000).slideDown(3000); }); }); </script> </head> <body> <button id="btn1">slideUp</button> <button id="btn2">slideDown</button> <button id="btn3">fadeIn</button> <button id="btn4">fadeOut</button> <button id="btn5">slide toggle</button> <button id="btn6">toggle</button> <button id="btn7">chaining</button> <br> <img src="../image/dog.png" id="img" width="300px" height="300px"> </body> </html> | cs |
이렇게도 사용할 수 있다.
반응형
'✨ Front-end > jQuery' 카테고리의 다른 글
| [jQuery] JSON 표기법, 임시 회원으로 로그인 성공, 실패 처리해보기 (0) | 2023.09.04 |
|---|---|
| [jQuery] var( ) 비밀번호 일치 여부 확인하기, (중복체크) (0) | 2023.09.04 |
| [jQuery] innerHTML, text 바꾸기 (0) | 2023.09.04 |
| [jQuery] 가장 기초적인 $( function() { .... } 에 대해 (0) | 2023.09.04 |
| [jQuery] 아코디언(accordion) UI 써서 활용하기 (1) | 2023.09.04 |
댓글