<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "js/jquery-3.5.1.min.js"> </script>
<script>
$(document).ready(function(){
/*
h1 tag 클릭하면 글자색이 빨간색으로 변하고
h1에 마우스를 접근시키면 배경을 노란색
h1에 마우스가 벗어나면 배경을 흰색으로 변경
*/
// 원래는 이렇게 접근해야 하는데, jQuery 덕분에 쉽게 쓸 수 있다.
/*
let h1Tag = document.getElementsByTagName('h1')[0]
h1Tag.style.backgroundColor = 'red';
h1Tag.style.color = 'yellow';
*/
/*
$('h1').click(function(){
$(this).css('color', 'red')
})
$('h1').dblclick(function(){
$(this).css('color', 'black')
})
$('h1').mouseenter(function(){
$(this).css('background-color', 'yellow')
})
$('h1').mouseleave(function(){
$(this).css('background-color', 'white')
})
*/
$('h1').on({ // on : 이벤트를 모두에 해당하는 것
'click' : function(){
//$(this).css('color', 'red')
//$(this).css('background-color', 'pink')
$(this).css({
color : 'red',
'background-color' : 'purple' // 속성명에 특수문자가 있으면 반드시 ('')붙여야 한다.
})
}, 'mouseenter' : function(){
$(this).css('background-color', 'yellow')
}, "mouseleave" : function(){
$(this).css('background-color', 'white')
}, 'dblclick' : function(){
$(this).css('color', 'black')
}
})
})
</script>
</head>
<h1>첫번째 문장입니다</h1>
<h1>두번째 문장입니다</h1>
<div>
<h1>세번째 문장입니다</h1>
</div>
<h1>네번째 문장입니다</h1>
<button>클릭</button>
<body>
</body>
</html>