콜백함수
- 문서로드된 후에 호출되는 콜백함수
1. window.onload = function(){}
2. $(document).ready(function(){})
3. $(function(){})
<!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 = "../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function proc1(vh){
$(vh).hide();
}
$(document).ready(function(){
// 콜백함수 패버려.
$('#result2 h2').on('click', function(){
/* this.style.display = "none"; */
$(this).hide();
})
})
</script>
</head>
<body>
<div class="box">
h2요소를 클릭하면 화면에서 사라진다.<br>
<h2 onclick = "proc1(this)">
<br>
<div id="result1">
<h2 onclick = "proc1(this)">클릭하면 사라집니다1.</h2>
<h2 onclick = "proc1(this)">클릭하면 사라집니다2.</h2>
<h2 onclick = "proc1(this)">클릭하면 사라집니다3.</h2>
<h2 onclick = "proc1(this)">클릭하면 사라집니다4.</h2>
<h2 onclick = "proc1(this)">클릭하면 사라집니다5.</h2>
<h2 onclick = "proc1(this)">클릭하면 사라집니다6.</h2>
<h2 onclick = "proc1(this)">클릭하면 사라집니다7.</h2>
<h2 onclick = "proc1(this)">클릭하면 사라집니다8.</h2>
<h2 onclick = "proc1(this)">클릭하면 사라집니다9.</h2>
<h2 onclick = "proc1(this)">클릭하면 사라집니다10.</h2>
</div>
</div>
<div class="box">
h2요소를 클릭하면 화면에서 사라진다.<br>
script에서 h2에클릭 이벤트를 준다. <br>
$('#result2 h2').on('click', function(){})
<br>
<div id="result2">
<h2>클릭하면 사라집니다1.</h2>
<h2>클릭하면 사라집니다2.</h2>
<h2>클릭하면 사라집니다3.</h2>
<h2>클릭하면 사라집니다4.</h2>
<h2>클릭하면 사라집니다5.</h2>
<h2>클릭하면 사라집니다6.</h2>
<h2>클릭하면 사라집니다7.</h2>
<h2>클릭하면 사라집니다8.</h2>
<h2>클릭하면 사라집니다9.</h2>
<h2>클릭하면 사라집니다10.</h2>
</div>
</div>
</body>
</html><!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 = "../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){ /* 문서가 로드된 후에 h1을 선택하시오 */
$('h1').css('color', 'blue');
$('h1').first().css('color', 'red');
$('h1').eq(2).css('color', 'green');
})
/* $(document).ready(function(){
$('h1')
})
window.onload = function(){
$('h1')
} */
</script>
</head>
<body>
<div class="box">
문서로드된 후에 호출되는 콜백함수<br>
1. window.onload = function(){}<br>
2. $(document).ready(function(){}) <br>
3. $(function(){}) <br><br>
$('h1').css('color', 'blue'); <br>
$('h1').first().css('color', 'red'); <br>
$('h1').eq(2).css('color', 'green'); <br>
<br>
<div id="result1">
<h1> 무궁화 꽃이 피었습니다.</h1>
<h1> 바람에 낙엽이 춤을 춥니다.</h1>
<h1> 꼭꼭 숨어라 머리카락 보일라</h1>
<h1> 꼭꼭 숨어라 머리카락 보일라</h1>
<h1> 꼭꼭 숨어라 머리카락 보일라</h1>
</div>
</div>
</body>
</html>
삐약..뺙뺙