반응형
목차
글 시작에 앞서 visual studio에서 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다.
(https://scribblinganything.tistory.com/298)
jquery - 버튼 클릭 해서 글짜 지우고 나타나게 하기 : hide, show
- $(selector).hide(speed,callback);
- $(selector).show(speed,callback);
selector 를 선정하여 사라지게 하고 싶은 부분이나 나타나게 할 부분을 정한다. 입력인자로 speed와 callback 이 있다. speed는 반응속도를 조절하는 것이고 callback은 hide와 show 이후 실행될 함수를 정의한다.
코드>>
<!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>https://scribblinganything.tistory.com/</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bt1").click(function(){
$("#ex1").hide(1000);
});
});
</script>
</head>
<body>
<p id = "ex1">버튼을 누르면 글짜가 사라집니다.</p>
<button id="bt1">숨기기</button>
</body>
</html>반응형
결과>>
주석>>
1000이라는 speed 때문에 천천히 글짜가 없어졌다. hide 되신 show를 사용하면 사라진 글짜를 나타나게 할 수 있다.
jquery - 버튼 클릭 해서 글짜 지우고 나타나게 하기 : toggle
- $(selector).toggle(speed,callback);
toggle은 hide와 show 기능을 다 포함한 기능이다. 한번 클릭하면 hide 기능이 실행되고 한번 더 클릭하면 show 기능이 실행된다.
코드>>
<!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>https://scribblinganything.tistory.com/</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bt1").click(function(){
$("#ex1").toggle(1000);
});
});
</script>
</head>
<body>
<p id = "ex1">버튼을 누르면 글짜가 토글됩니다.</p>
<button id="bt1">숨기기</button>
</body>
</html>
결과>>
주석>>
클릭할때마다 글짜가 사라졌다가 나타난다.
반응형
'웹관련프로그래밍(web programming) > Javascript 자바스크립트' 카테고리의 다른 글
| [Javascript] jquery slide 효과로 화면이 나오거나 사라지게 하기 (0) | 2021.09.28 |
|---|---|
| [Javascript] jquery fade 기능, 천천히 사라지거나 나타내게 하기 (0) | 2021.09.27 |
| bootstrap, container-fluid,container 클래스 비교 (0) | 2020.12.24 |
| javascript css html head에서 정의(선언) (0) | 2020.12.24 |
| javascript 객체지향 (0) | 2020.12.21 |