JQuery Study 1 - 2011.04.25.

회사에서 jQuery 강좌가 시작됬다.
첫날은 아파서 빠지고, 두번째 수업은 어찌저찌 하다보니 빠지고...
세번째 수업에 경우 참석을 했다.

강사의 수업방식이 차근 차근 짚어주는 편이어서 2번의 수업을 빼먹었지만 따라가기에 전혀 무리가 없었다.

jQuery를 사용하기 위해서는 jquery.js파일을 연결해주기만 하면 된다.
파일은 다운받아서 프로젝트 내부에 둬도 되고, jquery.com에서 제공하는 연결 링크를대로 걸어줘도 된다. 난...다운로드하는편이 링크가 깔끔해서 좋기도 하고, 혹시나 연결링크로 걸어둔 타 사이트에 문제가 생겨도 내 사이트에는 영향을 받지 않을 것이므로 다운로드쪽을 선호한다.

$(function(){})
js에서 주로 사용하는 window.onload 에 해당하는 녀석이다.
jQuery는 쓰는 사람 입장에선 매우 간단해서 좋긴 한데...남의 소스를 해석할라면 정말이지 '삐-' 소리가 마구 울릴것 같다는 단점이 있다. ㅋㅋ

selector
셀렉터는 jQuery의 핵심이라고 해도 좋을 녀석이다.
다행히 현재 하고 있는 데스크 플젝에서 차장님이 셀렉터개념을 도입한 공용 라이브러리를 탑재하시는바람에 jQuery를 배운적은 없어도 셀렉터에는 익숙해져 있는지라 쓰기에 편했다.
$("selector") 로 선택하는데 selector문법은 아래와 같다.

id선택자  : #id명

요소선택자 : 요소이름

class선택자 : .class 명

속성선택자 : 요소명[속성명]

자식선택자 : 부모 > 자식

자손선택자 : 공백

인접선택자 : +

중복선택자 : ,

가상클래스 선택자 : 콜론

첫번째 자식 : first-child

두번째 자식 : nth-child(2), eq(2)

마지막 자식 : last-child

홀수 리스트만 선택 : nth-child(odd)

짝수 리스트만 선택 : nth-child(even)

.attr("속성" , "값")
속성을 설정할때 쓰인다.

.css("속성", "값")
스타일 속성을 설정할때 사용한다.

attr과 css는 여러개의 속성을 한번에 설정하는 경우 맵 방식을 사용하는데 맵 방식의 선언 방법은 {"속성" : "값", "속성" : "값","속성" : "값"} 이다.

.show(int), .hide(int), .toggle(int)
css속성인 display : none/block를 이용해서 요소를 보이거나 숨기거나 하는 동작을 자주 사용하기때문에 그부분을 아예 함수로 만들어두었다. 파라메터로 숫자를 주면 밀리초 단위로 인식해서 천천히 보여주고, 천천히 숨기는 애니매이션이 자동으로 실행된다.
보여줬다 숨겼다를 토글로 해야하는경우 전처럼 상태값을 기준으로 if처리를 하는게 아니라 간단히 toggle로 처리한다.

.fadeIn(int), fadeOut(int), fadeToggle(int)
.slideUp(int), slideDown(int), slideToggle(int)
자주 사용되는 애니매이션을 간단히 구현할 수 있다.
함수 이름만 봐도 어찌 동작되는지 눈에 보인다 ㅋㅋㅋ
파라메터로 넘어가는 숫자는 show/hide에서 사용하는 것과 같다.

.bind("이벤트명", 콜백함수), .unbind("이벤트명")
이벤트를 연결하고, 연결된 이벤트를 해제한다.
bind로 이벤트를 연결한경우에는 버블링 상관없이 동작을 하지만, click이나 mousemove등의 실 이벤트명으로 이벤트를 연결한 경우에는 동작하지 않는다.

.click(함수), .mouseover(함수)
자주 사용되는 이벤트를 따로 함수로 빼 두어서 굳이 bind를 사용할 필요가 없다.

그 외에 CSS속성들이랑 몇가지를 더 배우긴 했는데...
중요한건 요녀석들인듯 ^^*

메쏘드 체인으로 여러개의 메소드를 쭉~~ 연결해서 쓸 수 있는데....
이게 참... 그냥 쓰기엔 편하지만 해석하기엔 대박 짜증이 난다 ㅋㅋㅋ
그냥 가능하다는 정도만 알아두고 실제 코딩시엔 적당히 떼어서 코딩을 해야 욕을 안먹을듯...^^*
메소드 체인으로 연결시에는 주로 next(), prev() 등을 이용해서 주변 요소로 넘어갔다가 오기도 하는데 주변요소 선택자를 통해서 넘어갔다가 다시 이전 요소로 올라갈려면 .end()를 사용한다.
복잡한거 같지만 조금만 생각해보면 이해가 가는 문법.
그래도 해석은 여전히 짜증날거 같다 ㅋㅋㅋㅋㅋ


참고 사이트...
jQuery 다운 : http://jquery.com
jQuery UI : http://jqueryui.com/