728x90
반응형
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
W3Schools try it yourself를 사용해서 제이쿼리 동작을 연습해봤다.
기본 예제로 나와있는 p태그 클릭을 호버작동으로 슬라이드가 사라지는 타이머를 주었고
버튼을 만들어서 클릭 했을 때 슬라이드가 다시 생성되도록 변경하도록 코드 변경.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).slideUp(2000);
});
$("button").click(() => {
$("p").slideDown(2000);
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<button> button </button>
</body>
</html>
jQuery
jQuery = JavaScript Library
식별자 $ 사용. /// $ = jQuery 함수 이름..
728x90
반응형
댓글