jQuery Basics

jQuery

Basics

불과
    몇
    년전만
    해도...

하지만
    지금은
    아닙니다.

심지어
    우리를
    짜증나게
    하고

힘들게
    합니다.

SO YOU NEED...

jQuery를
    사용하는
    2단계

1.
    선택하고

2.
    실행한다

jQuery(‘#menu’) jQuery(‘#content
    p
    a’) jQuery(‘div#header
    h2’)

$(‘#menu’) $(‘#content
    p
    a’) $(‘div#header
    h2’)

CSS2,
    CSS3
    선택자 a[href] a[href=”link.html”] a[href^=”http://”] #menu
    >
    li #current
    ~
    p li:first-child,
    li:last-child li:nth-child(even) li:nth-child(2)

jQuery
    특수
    선택자

div:first,h3:last :header :hidden,:visible :animated :input,:text,:button,:empty,:eq(2) div:contains(‘text’)

선택

$(‘#menu’).addClass(‘hello’) 실행

자동
    루프

$(‘div’).hide();

var
    divs
    =
    document.getElmentsByTagName(‘div’); for(var
    i
    =
    0;
    i
    
    li:hidden’);

Ajax 기본
    형식 $.ajax({
    
    
    
    url
    :‘action.php’,
    
    
    
    success
    :
    function(){
    /*
    ...
    */
    },
    
    
    
    error
    :
    function(){
    /*
    ...
    */
    } }); POST
    요청
    축약 $(...).post(
    
    
    ‘action.php’,
    {param1
    :
    ‘value’},
    
    
    
    function(data){
    /*
    ...
    */
    } ); HTML을
    읽어
    들인
    후
    특정
    영역에
    삽입 $(...).load(‘page.html’);

체이닝

=
    함수를
    계속
    연결해서
    사용

체이닝

$(‘p’).addClass(‘box’).hide();

$(‘p’) .addClass(‘box’) .hide();

체이닝 $(‘p’) .addClass(‘box’) .append(‘STRONG’) .before(‘’) .prev() .append(‘

’) .find(‘> ul’) .attr(‘_created’, ‘true’) ......

문서가
    준비되면
    시작하기 ...
    어떤
    객체
    ...

문서가
    준비되면
    시작하기 ...
    어떤
    객체
    ...

문서가
    준비되면
    시작하기 ...
    어떤
    객체
    ...

대세는
    jQuery

Performance

jQuery
    TaskSpeed
    성능
    비교

http://www.swivel.com/charts/12485-jquery-1-4-2-taskspeed-performance-comparisons

jQuery
    TaskSpeed
    성능
    비교

6배 IE6

http://www.swivel.com/charts/12485-jquery-1-4-2-taskspeed-performance-comparisons

1.7 RC ~

+

Plugins

네비게이션
     메뉴
     탭패널
     아코디언
     이미지롤링
     라이트박스
     칼라피 커
    폼유효성검사
    체크박스
     별점
    툴팁
    드래그앤드롭
    정렬목록
     테이 블정렬
     그리드
     WYSYWYG에디터
    
     테이블스크롤
     라운드코너
     날 짜선택기
     셀렉트박스
     쿠키
     멀티파일업로더
     자동완성
     폼스킨
     입력 마스크
     라디오버튼
     스핀버튼
     슬라이더
     달력
     드롭다운메뉴
     텍스트 박스리사이저
    시간선택기
    배경이미지애니메이션
    아이폰UI
    대화상 자
     라이브에디팅
     XML피드해석기
     트리뷰
     태그편집기
     LazyLoad
     뉴스티커
     팝업창
     갤러리
     PasswordStrengthMeter
     애니메이션
     슬라이딩로그인패널
    도킹패널
    슬라이딩레이블
    이미지줌
    파노라마 뷰어
     이미지자르기
     폴라로이드뷰어
     슬라이딩이미지퍼즐
     단축키
     페이지네이션
     데이터테이블
     구글지도
     템플릿
     피쉬아이메뉴
     빠른 검색
    태그클라우드
     WYM에디터
    그림자
     그래디언트
     차트
    이모티 콘
     자동계산
     태그추천
     뮤직플레이어
     이미지큐브
     경고창
     가상키보 드
    페이지말기
    버튼만들기
    스타일시트변경
    이미지슬라이더

Easy

One Function jQuery()

78% jQuery

18% Prototype

14%

Mootools

www.webdirections.org/sotw10

Thank you! 행복한고니
    -
    김태곤 http://mygony.com/ 미투데이
    :
    taggon 트위터
    :
    @taggon

Photos • http://www.flickr.com/photos/evilerin/3796279865/ • http://www.flickr.com/photos/michaelclesle/4347211903/ • http://www.flickr.com/photos/tonyjcase/4310452844/ • http://www.flickr.com/photos/thomwatson/1132365/ • http://openphoto.net/gallery/image.html?image_id=8251