jQuery reference : http://docs.jquery.com/
01. jQuery 둘러보기
01. jQuery CorejQuery(선택자), $(선택자)등의 자바스크립트 핵심 내용이 들어 있습니다.02. SelectorsjQuery(선택자)에서 "선택자"에 들어가는 내용으로만약 CSS 선택자를 알고 있다면 CSS 선택자를 그대로 사용해도 됩니다.CSS선택자 이외에 jQuery만의 선택자가 있으니 이런 선택자를 추가로 배우면 됩니다.CSS선택자 VS jQuery 선택자CSS선택자- css선택자는 <style>에서 사용하고- 정적 즉, 실행전에 작정함, 실행하고 난 후에는 동적으로 변경할수 없음.<style>.test {color:#ff0000;}</style><div class="test">test<div>#test{color:#ff0000;}jQuery 선택자- jQuery 선택자는 <script>에서 사용하고- 동적 즉, 실행후에 실시간으로 엘리먼트의 속성(attribute), 스타일(style)등을 변경할 수 있습니다.<script>$(".test").css("color", "#ff0000");</script>03. Attributes<div class="test1" id="id1" data-user="ddan"></div>에서class, id, data-user를 속성(attribute)라고 하며 이 속성을 제어하는 기능이 들어 있습니다.04. Traversing이 기능에는특정 노드의 속성을 변경한다던지 스타일을 변경하기 위해서 우선- 특정 노드의 자식 노드를 찾고(find, filter, children),- 특정 노드의 앞뒤 형제노드를 찾고,- 시작과 마지막의 노드를 찾고,- 부모 노드를 찾고- 몇번째에서~몇번째 노드를 선택(slice) 하는 기능이 들어 있습니다.05. Manipulation이 기능에는- 노드를 추가한다거나(after(),appendTo(), insertAfter(), before(),insertBefore()- 노드를 삭제한다거나(remove(), removeAll())- 노드를 이동한다거나(after(),appendTo(), insertAfter(), before(),insertBefore())- 노드를 비운다ㅓ나(empty());- 클래스를 추가한다거나(addClass());- 클래스를 제거한다거나(removeClass());- html값을 변경한다거나(html())- text값을 변경한다거나(text());- value값을 변경한다거나 (val());- 특정 요소의 너비와 높이등을 알아낸다거나하는 기능이 담겨 있습니다.06. CSS이 기능에는- 스타일을 알아내고, 변경하는 기능이 들어 있습니다.- 또한 요소의 위치값이나 너비와 높이값을 구할수 있습니다.- border와 padding이 포함된 크기, margin이 포함된 크기등을 구할수 있습니다.07. Event이 기능에는- 이벤트를 추가, 삭제, 발생 하는 기능이 들어 있습니다.08. Effects이 기능에는 인터랙티브를 위한 기능으로서- 천천히 나타났다 사라지는 페이드인,아웃 기능- 슬라이드 업다운 기능- 사용자 정의 효과 기능이(animate)들어 있습니다.09. Ajax이 기능에는 서버와 데이터를 주고 받고 하는 기능이 들어 있습니다.- get방식, post방식으로 데이터를 주고 받을 수 있을 뿐만 아니라ajax과 관련된 다양한 기능을 제공합니다.10. Utilities- 이외에 보조적인 기능을 제공합니다.
02. 학습 순서
단계 01 - 01. jQuery Core단계 02 - 02. Selectors단계 03 - 04. Traversing단계 04 - 05. Manipulation단계 05 - 06. CSS단계 06 - 03. Attributes단계 07 - 07. Event단계 08 - 08. Effects단계 09 - 08. Effects단계 10 - 09. Ajax단계 11 - 10. Utilities