[jQuery] ready

jQuery ready

문서로딩 완료 이후 실행되는 메서드이다.
onload 효과와 비슷하다.

	<button type="button" class="btn">버튼</button>
	<script type="text/javascript">
		console.log($('.btn'), '버튼');
		
		//문서로딩 후에 실행되기 때문에 html요소가 아래에 있는 대상도 조회가된다.
		//순서상관없이 문서중간에 작업을 해야할 상황이 생길 때가 있다. 
		//1번째 방법
		$(document).ready(function(){
			console.log($('.btn2'), '버튼2');
		});
		
		
		//ready -> 간소화 시킨방법
		//2번째 방법 
		$(function(){
			console.log($('.btn2'), '버튼3');
			
			$('.btn2').click(function(){
				console.log('클릭'); 
				//이벤트 넣을시 ready로 감싸서 함수안에 넣은 모습, 
				//btn2가 아래에 있음에도 이미 등록된 상황이기 때문에 이벤트가 실행이 된다. 
			});
		});
		
		
		window.onload = function(){
			var btn2 = document.querySelector('.btn2');
			console.log(btn2, '문서로딩 이후 실행');
		}
	</script>
	
	<button type="button" class="btn2">버튼2</button>

//1번째 방법

//2번째 방법

//문서로딩 이후 실행