[jQuery] 3.script 위치

in Web on jQuery


script 위치



jQuery 문을 작성하는 는 어디에 위치해야할까요?

예제를 통해 살펴보죠! 


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-3.3.1.js"> /* jQuery 불러옴 */ </script> 
	
/* ---------------------- head에 위치-------------------------- */
	<script> 
		
		console.log('head 에서 실행') 	/* console에서 출력시키는 함수 */
		$('.banner').attr({'src':'javascript.png'}) 	/* .banner의 속성을 변경 */
	</script>
/* ------------------------------------------------------------ */

	</head>
<body>

<!--------------속성을 바꾸려는 요소 메모리에 올리기전에 위치------------>
	<script>
		console.log('body first 에서 실행')
		$('.banner').attr({'src':'javascript.png'})
	</script>
<!-------------------------------------------------------------------->    
    
	<img src="jQuery.png" alt="" class="banner">
    
    
<!-------------- 속성을 바꾸려는 요소 메모리에 올린 후에 위치------------>
	<script>
		console.log('body last 에서 실행')
		$('.banner').attr({'src':'javascript.png'}) 
	</script>
<!-------------------------------------------------------------------->  
</body>
</html>



구체적인 문법은 다음에 살펴보고, 위치만 잘 봐주시길 바랍니다.

결론부터 말하면, script문은 어디든 올 수 있습니다.

하지만, html dom에 있는 요소를 건드리려면 메모리에 먼저 올려야합니다.

쉽게 말해서 위의 script문들은 이미지 jQuery.png를 바꾸려는 것인데,

이미지를 메모리에 올린 후에 script 문을 위치시켜야 이미지가 변경됩니다.

그럼, script문이 어디든 올 수 있는게 무슨 의미가 있을까요??

방법이 있습니다~! 다음과 같이하면 script문이 어디에 있든 dom에 있는 요소를 변경할 수 있습니다. 


<script>
$(document).ready(function(){
	/* document가 준비되면 실행 ->dom을 다 읽어들이고 실행*/
	$('.banner').attr({'src':'javascript.png'}) 
})
</script>



다음과 같이 간단히도 할 수 있습니다. 


<script>
$(function(){
	/* document가 준비되면 실행 ->dom을 다 읽어들이고 실행*/
	$('.banner').attr({'src':'javascript.png'}) // 간단하게 표현 가능
})
</script>