<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#div01{
background-color: yellow;
height: 150px;
}
</style>
<script src = "js/jquery-3.5.1.min.js"> </script>
<script>
$(document).ready(function(){
alert('ready')
// 버튼을 클릭했을 때 h1 첫번째 요소 hide 하기
$('button').click(function(){
// $('h1:first').hide('slow')
$('h1:first').hide(1000) // 3초에 걸쳐서 hide
})
$('body > h1').dblclick(function(){ // 자식태그 선택
$(this).hide(1000)
})
/* $('#div01').mouseenter(function(){
$(this).css('background-color', 'blue')
})
$('#div01').mouseleave(function(){
$(this).css('background-color', 'pink')
}) */
// $('#div01').hover(mouseenter, mouseleave) 형태
$('#div01').hover(function(){
$(this).css('background-color', 'purple')
}, function(){
$(this).css('background-color', 'blue')
})
$('#div01').click(function(event) {
console.log(event.pageX, event.pageY)
console.log(event)
})
})
</script>
</head>
<body>
<div id = "div01">
나는 div 영역임둥<br>
마우스를 접근시켜보삼
</div>
<h1>첫번째 문장임둥</h1>
<h1>두번째 문장임둥</h1>
<div>
<h1>세번째 문장임둥</h1>
</div>
<h1>네번째 문장임둥</h1>
<button>클릭</button>
</body>
</html>hover 함수 사용방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#menu{
heigth : 50px;
background-color:green;
}
#subMenu{
height : 100px;
background-color : yellow;
display : none;
}
</style>
<script src = "js/jquery-3.5.1.min.js"> </script>
<script>
$(document).ready(function(){
$('#menu').hover(function(){
//$('#subMenu').slideDown(1000)
$('#subMenu').slideToggle(1000)
}, function(){
//$('#subMenu').slideUp(1000)
$('#subMenu').slideToggle(1000)
})
})
</script>
</head>
<body>
<div id = "menu">마우스를 접근시켜보세요</div>
<div id = "subMenu">메뉴화면입니다</div>
</body>
</html>'웹 프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] focus, blur (0) | 2020.06.23 |
|---|---|
| [jQuery] 키보드 관련 이벤트 : keyup, keydown (0) | 2020.06.23 |
| [jQuery] CSS 적용 (table 홀수 행, 짝수 행 따로 적용하기) (0) | 2020.06.23 |
| [jQuery] jQuery API 활용 예제 : 버튼 숨기기 (0) | 2020.06.23 |
| [jQuery] jQuery 객체와 JS 객체의 구분 (0) | 2020.06.23 |
