Learn jQuery Day 1,2,3

jQuery 사용안한지 벌써 수개월째… 버전은 1.7대로 올라섰다. 아마도 다음 플젝때 사용하게 될거 같아 뭘 좀 봐야 하나… 싶다가 시중에 서적도 많이 있고… 뭐 굳이 따로 공부할 필요 있을까… 싶은데

마침 Tuts에서 30일 무료 온라인 과정을 한다기에 당장 Email을 입력하고 시작했다.
벌써 전세계 2만명 넘는 사람이 신청했고 Tuts에 대해선 뭐… 이미 양질의 여러 웹기술 Tutorial 로 유명한곳이라 더이상의 설명이 필요 없다.

Day1
Google CDN 이용하기
Google Chrome 개발자 도구 이용하기
window.jQuery = window.$ = jQuery;

작년 Sencha Touch 강의후 후기를 보니 Chrome 개발자도구 이용방법에 대해 신기했다고 남겨주신분들이 많던데 굳이 개발자가 아니라도 웹상의 정보를 취합하고 정리하는 분들에겐 꼭 필요한 스킬? 아닐까 싶다.

Day2
$(document).ready()

ready로 감싸야 하는 이유와 좀더 간단하게 사용할 수 있는 방법 및 jQuery 소스를 통한 검증까지… 나도 이젠 소스를 좀 ㅎㅎ

Day3
$(‘ul.emphasis’).children(‘li’).css(‘color’, ‘green’);         // ul.emphasis > li {}
$(‘ul.emphasis’).find(‘li’).css(‘color’, ‘green’);               // ul.emphasis li {}
$(‘ul.emphasis’).eq(INDEX).text(‘added with jQuery’);
$(‘li’).parents(‘.container’)
$(‘li’).closest(‘.container’)

parents와 closest 두 메서드가 흥미롭다. parents는 필터링된 모든 elements 를 반환하고
closest는 이름에 걸맞게 상위 element를 올라가면서 가장 가까운 놈을 반환해준다.
예상치 못하게 closest 메서드는 조건만 맞으면 지 자신도 반환한다고… 😯

어찌보면 이렇게 element간의 위계?에 따라 부모를 찾고, 자식을 찾고, 형제를 찾는 것들이 왜 있을까도 싶기도 했다. 그냥 하나 콕 찝어서 쓰면 되는거 아닌가 하고 ㅎㅎ
헌데 javascript로 좀더 기능적인 페이지를 만들다보면 딱히 element ID로만 접근이 힘든 경우도 허다하고 동적으로 개체를 원하는 위치에 삽입할땐 이런 메서드가 무척이나 유용하다. 강의에선 ul 과 li 정도만 다뤘지만 다른 태그들 역시 이와 동일한 형태의 접근이 가능하다.

http://learnjquery.tutsplus.com/
http://api.jquery.com/closest/
http://api.jquery.com/parents/
http://www.sublimetext.com/x 

Advertisements
%d bloggers like this: