티스토리 뷰

프로그래밍/script언어

[Head First jQuery] 01. jQuery 시작하기

앙망 2011. 11. 11. 16:32

문제 인식

페이지를 변경하려면 매번 서버에 요청해야 하나?

HTML과 CSS는 페이지의 구조와 스타일을 만드는 데 충분한다.

  1. 브라우저가 서버에 웹 페이지 요청
  2. 웹 서버가 요청된 페이지를 찾아서 보내줌
  3. 브라우저는 받아온 페이지를 렝더링하여 화면에 보여줌

때때로 리로딩 없이 페이지를 변경하기 위해 웹브라우저와 대화하려면 어떻해야 하나?

<script>를 사용한다.

jQuery에 들어서기

JavaScript interpreter

모든 브라우저는 JavaScript interpreter가 내장되어 있다.

  • 페이지에서 일어나는 이벤트를 듣는다.
  • 브라우저에게 명령한다.

jQuery란?

특정한 목적을 가진 JavaScript library이다. 즉 웹 페이지 문서를 시시 때때로 변경하는 데 사용된다.

브라우저 들여다 보기

  1. 서버에서 HTML파일 가져오기
  2. DOM 만들기
    브라우저의 레이아웃 엔진이 HTML과 CSS를 가지고 DOM으로 사용되는 문서를 만든다.
  3. 렌더링된 페이지를 뷰포인트(화면)에 보여주기

  4. JS(자바스크립트) DOM 참조하기

    웹 페이지가 리로딩없이 변경될 수 있도록 한다.

웹 페이지의 숨겨진 구조

DOM

많은 세월동안, HTML, CSS, JavaScript가 좀 더 효과적으로 협업하도록 도와줬다.

  • root : <html> 태그
  • branches
  • nodes

JavaScript와 jQuery는 DOM을 사용해서 페이지의 구조를 변경한다.

jQuery는 DOM을 조정하기 쉽게 만들어준다.

jQuery는 "selector engine"을 사용해서 귀찮을 일을 없애준다.

Tip:브라우저의 개발툴에서 DOM의 구조가 동적으로 변하는 모습을 확인할 수 있다.

자바스크립트 해석기는 HTML, CSS 파일 원문을 변경하지 않는다. 브라우저의 메모리에 있는 DOM의 표현을 변경시킬 뿐이다.

jQuery function 소개

jQuery() 는 $()로 단축하여 사용한다.

$()에 들어가는 내용

  • CSS Selector : CSS selector를 넣으면 매칭되는 엘리먼트를 리턴한다. 제일 많이 사용하는 경우이다.
  • HTML : HTML을 넣어서 동적으로 브라우저 페이지에 DOM 엘리먼트들을 추가할 수 있다.
  • JavaScript Object

CSS selector 와 jQuery selector

selector CSS : style 을 다룸 jQuery : behavior 을 다룸
Element selectorh1{text-align:left;} ${"h1").hide();
Class selector .my_class(position:absolute}; ${".my_class").slideUp();
ID selector #my_id{color_#3300ff} $("#my_id").fadeOut();
저작자표시 비영리 변경금지
공유하기 링크
댓글

티스토리툴바