2012. 11. 28. 학습일지(1장)

오늘부터 jQuery를 제대로! 공부해보려고 해요.

마침 jQuery 온라인 스터디가 있길래 함께 참여하면서 제 블로그에도 같이 포스팅하도록 할게요.

그럼 jQuery를 정복하는 그 때를 위하여 화이팅!ㅎㅎㅎ

01. jQuery 시작하기

jQuery의 개념 대부분은 HTML 구조와 CSS(Cascading Style Sheets)로부터 나왔습니다.

jQuery 핵심 기능

1. 도큐먼트 요소에 접근 : 선택자 메커니즘을 이용하여 문서 객체 모델(DOM) 트리에 접근할 수 있습니다.
2. 페이지의 스타일 변경 : 페이지가 렌더링 된 이후에도 CSS 스타일을 따로 변경할 수 있습니다.
3. 도큐먼트 내용 변경 : 도큐먼트 내용 자체도 변경할 수 있습니다.
4. 페이지와 사용자 간 상호작용 처리 : 사용자 링크 클릭 등을 포함한 다양한 이벤트를 가로채 처리하는 방식으로 이벤트 핸들러를 추가할 수 있습니다.
5. 도큐먼트의 변화를 표시하는 애니메이션 추가 : 페이드(fade), 와이프(wipe)와 같은 시각적인 효과를 제공합니다.
6. 페이지를 새로고침하지 않고 서버에서 정보 가져오기 : Ajax 기능을 제공합니다.
7. 일반적인 자바스크립트 작업을 단순화

jQuery가 좋은 이유

1. CSS 지식을 최대한 활용 : CSS 선택자 사용
2. 확장 지원 : 피처 크리프를 피하기 위해 플러그인으로 사용
3. 브라우저의 차이로부터 해방 : 추상화된 레이어를 제공함
4. 언제나 집합으로 작업 : 묵시적 반복 기법
5. 여러 동작을 한 줄에 작성 : 객체에 대한 메서드가 객체 자신을 반환값으로 반환함으로써 다시 새로운 동작을 해당 객체에 적용할 수 있게 해줌
6. 매우 작은 크기의 패키지
7. 모든 사람에게 무료로 제공

jQuery 사용하기

- 공식 jQuery 웹사이트(http://jquery.com/)에서 JS파일을 다운로드하여 HTML 도큐먼트에서 <script> 요소로 jQuery 파일을 포함하기만 하면됩니다.

- 혹은 자체 콘텐트 전송 네트워크(CDN)으로도 이용할 수 있습니다.

- 다른 스크립트를 로드하기 전에 jQuery 라이브러리를 로드해야합니다.

연습

▶ CSS Class 변경하기

$(document).ready(function() {

$('div#mydiv').removeClass('nomal'); // 원래 적용되어있던 nomal Class 를 지우고

$('div#mydiv').addClass('highlight'); // highlight Class를 추가한다.

});

• $() 함수를 호출하면 jQuery 객체 인스턴스를 반환합니다.
• $(document).ready() 함수를 사용하여, DOM이 로드되는 즉시 함수를 호출합니다.
• 위의 예제는 익명함수(람다함수)로, 익명함수 기능은 메서드가 함수를 인자로 받지만 이 함수를 다시 사용하지 않을 때 편리하게 사용할 수 있습니다.

▶ console.log()

• 보통 값을 확인하기 위하여 alert() 함수를 사용했지만, 이 함수의 대안으로 console.log()를 사용할 수 있습니다.
• colsole.log() 메서드에 어떤 종류의 표현식도 넣을 수 있으며, 크롬에서는 F12를 눌러 Colsole 항목에서 값을 확인할 수 있습니다.