<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 숨기기, 보이기 예제</title>
<script src="libs/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
//글자 숨기기 버튼을 눌렀을때
$("#showText").click(function(){
$("div").show(); //div 영역을 보이게 함
});
//글자 보이기 버튼을 눌렀을때
$("#hideText").click(function(){
$("div").hide(); //div 영역을 보이게 함
});
});
</script>
</head>
<body>
<div>안녕하세요 jquery-3버전입니다.</div>
<button id="showText">글자 보이기</button>
<button id="hideText">글자 숨기기</button>
</body>
</html>
jquery로 하니까 글자 숨기기 보이기가 훨씬 간단한 것 같다ㅜ 이래서 이것 저것 많이 배우는구나...
728x90
'JAVASCRIPT' 카테고리의 다른 글
| <javascript> 반복문이 있는데도 함수를 쓰는 이유 (0) | 2022.04.29 |
|---|---|
| <jQuery> 떨리는 글자/ 이미지 (0) | 2022.04.25 |
| <JAVASCRIPT> 사용자의 의사 묻기 confirm (0) | 2022.02.21 |
| <JAVASCRIPT> prompt로 입력받은 String형 데이터를 Int형으로 바꿔주기//입력받은 숫자가 짝수인지 홀수인지 판별 (0) | 2022.02.19 |
| alert (0) | 2022.02.17 |