[codeSchool] try jQuery 정리 level 1 — jQuery소개 및 기본 사용법

codestates pre를 한 지 어언 5주.. 매주 medium으로 정리하려 했는데 이것저것 바쁜 일이 많아서 중간에 잠깐 못했다. 어찌어찌 underscore part 1까지는 clear했는데, 내가 굉장히 늦게 했음에도 불구하고 제출인원이 10명이 채 되지 않는다.

현재 twittler를 fork한 사람은 6명. 한 20명정도 pre를 듣는 것으로 알고 있는데 제대로 듣고 있는 사람이 10명이 안된다는 소리다. 이거는 이 프로그램이 제대로 가고 있다는 건지 의문이 든다. 따라가고 있는 소수가 프로그래밍을 듣고 와서인지 아니면 정말 공부만 해서인지(실제로 위워크에서 사는 동기분도 있지만) 모르겠지만 말이다.

대표분께서 미국에서 어렵게 배워오셨다는 코딩 부트캠프 형식. 하지만 on-line수업 + 직장과 병행하며 codestates 수업을 듣는 것은? 효율에 의문이 들 수밖에 없다. 물론 immursive 를 위한 전 단계라고는 하지만, flex immursive course에 큰 돈을 들여가며 들을 필요가 있을지. ?

각설하고. 그래도 중간중간 건질것들은 많다. 대표적인게 배움 사이트. jQuery 에 대해 복습도 할 겸, 재미있게 공부할 수 있는 codeschool의 jQuery 내용을 아래에 정리해 본다.

http://try.jquery.com 의 내용을 정리하였다.

---

Level. 1: What is jQuery?

jQuery의 역할 1) HTML document의 element를 찾기 2) HTML 내용 바꾸기 3) user이 어떤 것을 하고 어떻게 반응하는지 듣기 4) 페이지 animate 하기 5) network를 통해 이야기하기

먼저 브라우저가 HTML파일을 어떻게 읽어 들이는지 이해해야한다. 브라우저는 HTML을 Document Object Model → DOM으로 변환해서 이해하는데, 이것은 tree 구조를 가진 모델이다.

javascript는 개발자들로 하여금 DOM과 interact할 수 있도록 하는 언어이다.

기본적인 jQuery 사용법은 아래와 같다. jQuery(<code>); (이때 jQuery를 $로 축약해서 사용 가능하다. ) <code>위치에는 DOM이 들어가고 $는 DOM을 찾게 되는데, 이때 우리는 CSS Selector를 이용해서 DOM을 찾는다. 즉 h1 , p 등등. →$(“h1”);

DOM을 찾았으면 수정해야 하는데, 간단히 dot 을 붙여서 method를 사용하면 된다. 즉 $(“h1”).text(“changedText”); 와 같은 형식이다.

※이때 중요한 점은, jQuery를 사용하기 전 브라우저가 HTML파일을 DOM으로 모두 변환한 것을 확인해야 하는 것이다. 이를 보장하기 위해 아래와 같은 코드를 사용한다.

jQuery(document).ready(function(){
//code
});

jQuery를 사용하기 위해서는? jQuery사이트에서 파일을 다운받아서, HTML파일에 로딩한다. <script src=”jquery.min.js”></script>와 같이..

jQuery선택자는 CSS 선택자와 비슷한 역할을 하는데.. element, ID, class는 각각 아래와 같다.

CSS : p { … } / #container { } / .article{}

jQuery: $(‘p’); / $ (‘#container’); / $(‘.article’);

작은 따옴표 ‘’ 로 표현함에 주의하자.

jQuery 선택자를 썼을 때는 document내 해당하는 모든 DOM이 선택되는 것이다. (다수 선택)