<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="/jqpro/js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
function proc1(){
//dom객체
var elem = document.getElementById('result1');
elem.style.background = 'blue';
//dom객체인 elem에 $()로 감싸면 jquery로 변환됨
//elem.css('background', 'green'); //==>오류
$(elem).css('background', 'green');
}
$(function(){
$('#btn').on('click', function(){
//elem은 dom객체 변수
//css()함수를 사용하기 위해서 $(elem)
var elem = document.getElementById('result2');
$(elem).css('background', 'yellow');
//jq는 jquery 객체 변수
var jq = $('#result2');
jq.css('background', 'pink');
})
})
</script>
</head>
<body>
<div class = "box">
이벤트 설정<br>
1. 태그요소에서 : <button type = "button"><br>
<br>
<button type = "button" onclick="proc1()">확인</button>
<div id = "result1"></div>
</div>
<div class = "box">
이벤트 설정<br>
2. script에서 :
$('#btn').on('click', function(){ })<br>
$('button').eq(1).on('click', function(){ })
<br>
<button type = "button" id="btn">확인</button>
<div id = "result2"></div>
</div>
</body>
</html>
신입 개발자 입니다!!!