JQuery(document).ready(function() {

// code

});

$(function(){
  // code

});


$  기호는 jQuery 의 축약표시
$(something) 은 실제로 jQuery(something) 이며,   
$(function_callback)  는 ready 이벤트에 대한 또다른 축약표현이다.

다음과 동일하다. 
$(document).ready(function_callback);
jQuery(document).ready(function_callbak);


JQuery
DOM 엘리먼트를 쉽게 네비게이팅 할수 있도록 설계된 자바스크립트 라이브러리
엘리먼트 조작, 이벤트 처리, 비동기 리모트 콜을 생성할 수 있음.

2개의 주요부분을 포함함. 선택자와 변경자. 선택자는 웹페이지 내 일치된 모든 엘리먼트를 선택하기 위해
CSS 셀렉터 문법을 사용함. 변경자는 선택된 엘리먼트에 자식을 추가, 삭제, 스타일을 변경함. jQuery를 사용한다는 것은
선택과 수정을 연속적으로 수행함을 의미한다. 


jQuery 선택자 

jQuery CSS 함수 
css는 선택된 엘리먼트의 css  속성을 얻어오고, 설정하는 함수임. 

jQuery 사용의 장점
DOM 노드를 선택하고 수정하는 코드량을 줄임.
더 짧은 코드로 가독성을 높임
개발 스피드를 증가시킴
크로스브라우저 처리를 대신해줌 

 


absolute position 이해하기 
abosolute position 이 설정되면,  left, top 속성은 좌표로 다루어짐. 양의 y좌표는 아래방임. 
디폴트로 let, top속성은 웹페이지의 top, left 가장자리를 가리킨다. 이 기준 좌표는 DOM 노드가 어떤 postion 속성을
설정하느냐에 따라 달라진다. left, top 속성의 기준점은 그 부모의 top left 가장자리가 된다. 



html5 계층구조 
 html5 게임개발시에는 종종 html 계층를 잘 구조화하는 것부터 시작한다. 
html 계층구조는 유사한 게임 객체들을 그룹핑하는데, Adobe Flash 에서 무비클릭과 유사하다.
그룹핑된 게임 객체들을 일종의 레이어로 간주하면 쉽게 스타일을 적용할 수 있다.



키보드의 키가 눌려졌는지 알아내기 
키보드의 모든 키에는 키번호가 할당되어 있으며, 이 번호를 조회해서 키보드가 눌려졌는지 여부를 검사할 수 있다.
jQuery 의 keydown 이벤트 리스너를 통해 이벤트를 감시하고, event  발생시 event 객체는 key code 속성을 포함하고 있다. 
event 객체의 which  함수를 호출하여 키 코드를 획득할 수 있다.



문자열을 숫자로 변환 
$("#paddleA").css("top") 은 100이 아닌  문자열 "100px"을 반환함. 
parseInt(string, radix) 을 사용하여 명시적으로 숫자로 변환시켜주어야 4칙 연산을 할 수 있음. 



jQuery 함수 html()
선택된 엘리먼트의 컨텐츠를 얻어오고, 수정함.
.html() : 처음으로 일치되는 엘리먼트의 html 컨텐츠를 반환
.html(htmlString) : 모든 일치하는 엘리먼트의 html 컨텐츠를 설정함.