안녕하세요 jQuery 강좌 첫번째 시간입니다.
jQuery 심플하게 설명하여 jquery 입문자들의 이해를 돕고자
시작하게 되었습니다.
해당 강좌는 jQuery를 설치하지 않고 CDN을 통하여 진행하도록 하겠습니다.^^
우선은 CDN URL을 스크립트태그의 src속성에 적용을 해주시면 되겠습니다.
jquery 최초 쓰던 버전이 1.3 버전이었는데 벌써 1.11에다가 2.x 버전까지 나왔네요!!
2.x 버전은 뭔지 추후에 확인 해봐야 겠습니다 ㅋ
우선은 간단 예제를 들기위한 것이므로 단순하게 1.11.0 버전은로 진행을 하겠습니다.
웹파일을 하나 생성 후 jQuery CDN 스크립트 태그를 include 해주는 것을 우선해주세요
위치는 <body> 태그내에 혹은 <head> 태그내에 상관은 없겠지만
기본적으로 저는 <head></head> 태그 사이에 넣도록 하겠습니다 .
jQuery CDN INCLUDE
1 | <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> |
다음으로는 $(document).ready()에 대하여 설명을 드리겠는대요
1 2 3 | $(function(){// code insert}); |
위와 같이 더욱 간결하게 사용하실수도 있습니다.
자바스크립트를 사용하셨던분이시라면 window.onload와 동일한 기능이라고 생각하시면 되겠는대요.
물론 window.onload, $(function(){}) , $(document).ready() 의 onload 스크립트 코드들은 body태그의 모든 태그들이
출력된 다음에 호출이 되는 코드입니다.
onload 라고 해서 모두 같은 1순위인건 아닙니다.
호출순서는
1. $(document).ready() = $(function(){})
2. window.onload
위 순서입니다.
즉, 둘이 동일하게 body 태그내의 모든 코드를 읽은 후 호출되는 onload 기능들이어도
순수 window.onload 코드가 가장 나중에 호출이 된다는 것입니다.
그렇다면 HTML 태그가 읽히는 예제를 한번 들어보도록 하겠습니다.
ONLOAD 순서 이해하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script type="text/javascript">alert("HEAD ALERT 경고창");window.onload = function(){ alert("window.onload ALERT 경고창");}$(document).ready(function(){ alert("$(document).ready ALERT 경고창");})</script></head><body><script type="text/javascript">alert("BODY ALERT 경고창");</script></body></html> |
샘플로 작성한 HTML 코드는 위와 같습니다.
총 4개의 ALERT이 화면에 뜨도록 작성해보았는대요
결과를 미리 예상해보자면
1차 ALERT 메시지 : HEAD ALERT 경고창
2차 ALERT 메시지 : BODY ALERT 경고창
3차 ALERT 메시지 : $(document).ready ALERT 경고창
4차 ALERT 메시지 : window.onload ALERT 경고창
코드 순서로 따지자면 결과가 위처럼 나올거 같습니다.
호출순서가
위 -> 아래 -> $(document).ready() -> window.onload 형태라고 말씀을 드렸으니까...
그렇다면 실제로 html 코드를 실행해보도록 하겠습니다.
'WEB > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 인덱스로 요소 찾기 : jQuery(':eq(index)') (0) | 2015.12.22 |
|---|---|
| JQuery - 자동완성 플러그인 JSDT설치 (0) | 2015.11.20 |
| jQuery - 체크박스 전체 선택 및 해제하기 (0) | 2015.10.16 |
532
처음 프로그래밍을 시작한 개발자들은 Hello World!를 기억 할 것이다. Hello world가 Hell World가 될 줄 몰랐던 한 개발자의 이야기. 게시글의 출처를 표기하며, 출처를 남기지 않고 펌을 하는것에 대해 법적 책임을 묻지 않습니다.