[jQuery] 콜백함수

고동이의 IT·2021년 11월 22일
0

콜백함수

  • 문서로드된 후에 호출되는 콜백함수

    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>
	&lt;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>
profile
삐약..뺙뺙

0개의 댓글