[jQuery Cookbook - 1장 jQuery의 기초]

 

  •  jQuery는 HTML문서, 보다 정확하게는 문서객체모델(DOM)과 자바스크립트 사이의 상호작용을 간단하게 해주는 오픈소스자바스크립트 라이브러리이다.
  • jQuery의 철학 : Write less, do more (적게 작성하고, 보다 많이 한다)
  • jQuery 선택자 : #은 id, .은 class
  • jQuery('div').hide() => 모든 div를 숨긴다.
  • jQuery('div').text('new content') => 모든 div의 내부텍스트를 변경한다.
  • jQuery('div').addClass("updatedContent") => 모든 div에 updatedContent클래스를 추가한다.
  • jQuery('div').show() => 모든 div를 나타낸다.
  • jQuery 온라인문서 : http://docs.jquery.com/Main_Page
  • 문서에 jQuery 포함하기 (부가적인 기능향상을 위해 방법1을 사용하자!)

방법1 : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

방법2 : 다운로드 받아 포함시키기

  • DOM 로드된 후 함수 실행 (로딩속도 향상을 위해 방법3을 사용하자!)

    방법1 : jQuery(document).ready(function() { //실행구문 })

    방법2 : jQuery(function() { //실행구문 })

    방법3 : </body> 앞에 스크립트 추가

  • DOM요소 선택

    jQuery('a') => 모든 a요소 (== document.getElementsByTagName('a'))

    jQuery('a').length => 모든 a요소의 개수

    jQuery('input', $('form')) => 모든 form요소내의 input요소(들)

jQuery('input', document.forms[0]) => 첫번째 form요소내의 input요소(들)

jQuery('input', 'body') => body요소내의 input요소(들)

  • DOM요소 필터링

    jQuery('a').filter('.external') => 모든 a요소 중 클래스명이 external인 a요소(들) (== jQuery('a').filter(function(index) { return $(this).hasClass('external'); }))

    jQuery('p').filter('.middle').end() => 모든 p요소 중 클래스명이 middle인 요소(들)의 필터링 전 요소(들) (== jQuery('p'))

  • 파괴작업 (end()도 파괴작업의 이) : 일치된 jQuery요소집합에 변경을 가하는 모든 종류의 작업
  • DOM요소 검색

    jQuery('p').find('em') => 모든 p요소 하위의 em요소(들) (== jQuery('em', $('p')) ==jQuery('p em'))

    jQuery('p').filter('.middle').find('span').end().end() => 모든 p요소 중 클래스명이 middle인 요소(들)의 하위 span요소(들)의 검색 전, 필터링 전 요소(들)

    (==jQuery('p'))

  • filter는 현재 요소(들)에 대해, find는 하위 요소(들)에 대해 작동
  • DOM 셀렉션 추가

    jQuery('div').find('p').andSelf().css('border', '1px solid #993300'); => div요소(들)과 하위 p요소(들) 모두에 대해 스타일 적용

  • DOM 탐색

    jQuery('li:eq(1)') => 두번째 li 요소

    관련메소드 => next():다음요소, prev():이전요소, parent():상위요소, children():하위요소들, nextAll():다음요소들, prevAll():이전요소들

    jQuery('li:eq(1)').parent().children(':last') => 두번째 li요소의 상위요소의 마지막 하위요소

    기타 탐색관련 메소드 : http://docs.jquery.com/Traversing

  • DOM요소 생성

    jQuery('<p><a>jQuery</a></p>'); => p요소 생성

    jQuery('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com'); => p요소를 생성하고 하위 a요소(들)을 찾아 속성 변경

    jQuery('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com').end().appendTo('body'); 

    => p요소를 생성하고 하위 a요소(들)을 찾아 속성 변경 후 생성된 p 요소를 body요소 하위로 포함시킴

  • DOM요소 제거

    jQuery('a).remove(); => 모든 a요소 제거

    jQuery('a').remove('.remove'); => 클래스명이 remove인 모든 a요소 제거

  • DOM요소 교체

    jQuery('li.remove').replaceWith('<li>removed</li>'); => 클래스명이 remove인 모든 li요소들을 뒤에 나온 li요소로 변경

  • DOM요소 복제

    jQuery('ul').clone().appendTo('body'); => 모든 ul요소들을 복제하여 body의 하위요소로 포함시킴

    jQuery('ul#a li').click(function() { //실행구문 }).parent().clone(true).find('li').appendTo('#b').end().end().remove();

    => 아이디가 a인 ul 하위의 li요소들을 클릭하면 함수를 실행시키고 부모요소인 ul요소를 찾아 복제(true이면 이벤트까지도 복제됨)한 후 복제된 ul의

    하위 li요소들을 찾아 아이디가 b인 요소의 하위요소로 포함시킨 후 기존 ul을 제거

  • 속성 제어

    jQuery('a').attr('href', 'http://www.jquery.com').attr('href'); => 모든 a요소의 href속성의 값을 설정하고 가져옴

    jQuery('a').attr({'href':'http://www.jquery.com', 'title':'jquery.com'}) => 모든 a요소의 href속성값과 title속성값을 설정

    jQuery('a').removeAttr('title') => 모든 a요소의 title속성 제거

  • class 조작

    addClass() : 클래스 추가  hasClass() : 클래스 값 확인  removeClass() : 클래스 제거  toggleClass() : 클래스 없으면 추가, 있으면 제거

  • HTML 컨텐츠 / 텍스트 조작

    jQuery('p').html('<strong>Hello World</strong>'); => 모든 p요소에 html컨텐츠 삽입

    jQuery('p').html(); => 모든 p요소의 html 가져옴

    jQuery('p').text('Hello World'); => 모든 p요소에 text 삽입 (text메소드는 html을 escape한다)

    jQuery('p').text(); => 모든 p요소의 text 가져옴

  • 전역적인 충돌 없이 $ 사용

    (function($) {

    })(jQuery);

 

 

[JQuery Cookbook - 2장 jQuery로 요소 선택하기]

 

  •  jQuery함수내에서 CSS셀렉터 사용
    jQuery('#content p a'); => id가 content인 요소의 하위 모든 p요소의 하위 모든 a요소들
    jQuery('#content p a').addClass('selected'); => 선택된 요소들에 selected 클래스 적용
  • 직속 자손 결합자 (>) : 계층적 관계
    jQuery('#nav li > a'); => id가 nav인 요소의 하위 모든 li요소의 직속 자손인 a요소들

    jQuery('> p', '#content'); => id가 content인 요소의 직속 자손인 p요소들 => jQuery('#content > p')와 같다

    jQuery('#content').children(); => id가 content인 요소의 모든 직속 자손들 => jQuery('#content').find('> *');과 같다

    jQuery('#content').children('p'); => id가 content인 요소의 모든 직속 p요소들

  • 인접 형제 결합자 (+) : 같은 레벨벨
    jQuery('h1 + h2'); => h1요소에 인접한 h2요소들 => jQuery('h1').next('h2');와 같다
    jQuery('h1').siblings('h2, h3, p'); => h1요소에 인접한 h2나 h3나 p 요소들
    jQuery('li.selected').nextAll('li'); => selected클래스를 가진 모든 li요소들 다음에 나오는 모든 li요소들
  • 일반 형제 결합자 (~)

    jQuery('li.selected ~ li'); => selected클래스를 가진 모든 li요소들 다음에 나오는 모든 li요소들

  • 필터

    • :first 첫번째 선택요소
    • :last 마지막 선택요소
    • :even 짝수번째 요소들
    • :odd 홀수번째 요소들
    • :eq(n) 인덱스가 n인 요소
    • :lt(n) 인덱스가 n보다 작은 요소들
    • :gt(n) 인덱스가 n보다 큰 요소들

      jQuery(':even'); => 문서내의 모든 짝수번째 요소들
      jQuery('ul li').filter(':first'); => ul요소다음에 나오는 첫번째 li요소들

  • 현재 에니메이션 중인 요소 선택
    jQuery('div:animated'); => 에니메이션 중인 div요소들

    jQuery('div:not(div:animated)').animate({height:100}); => 에니메이션 중이 아닌 div요소들의 높이를 100까지 에니메이션

  • 텍스트나 요소를 포함하는 요소 선택

    jQuery('span:contains("bob")'); => bob라는 문자열을 포함하는 span요소들

    jQuery('div:has(p a)'); => p요소 하위에 a요소를 가진 div요소들

    jQuery('p').filter(function() { return /(^|\s)(apple|orange|lemon)(\s|$)/.test(jQuery(this).text()); });

      => apple이나 orange나 lemon이라는 텍스트를 가진 p요소들

  • 일치되지 않는 요소 선택

    jQuery('div:not(#content)'); => id가 content가 아닌 모든 div요소들

    jQuery('a:not(div.important a, a.nav)'); => important클래스를 가진 div요소의 하위 a요소가 아니고 nav클래스를 가진 a요소가 아닌 a요소들

    jQuery('a').click( function() { jQuery('a').not(this).addClass('not-clicked'); } ); => a요소를 클릭하면 모든 다른 a요소들에 not-clicked클래스 추가

    $('#nav a').not('a.active'); => id가 nav인 요소의 하위 a요소들 중 active클래스를 가지지 않은 a요소들

  • 가시성 기반 요소 선택

    jQuery('div:hidden'); => 눈에 보이지 않는 div요소들

  • 속성 기반 요소 선택

    jQuery('a[href="http://google.com"]');=>href속성의 값이 http://google.com인 a요소들

    jQuery('*[title][href]'); => title과 href 속성을 모두 가지는 요소들

    jQuery('div[id^="content-sec-"]'); => id속성의 값이 content-sec-으로 시작하는 div요소들

  • 속성 셀렉터

    • [attr] 특정 속성을 가지고 있는 요소
    • [attr=val] 속성이 특정값을 가지는 요소
    • [attr!=val] 속성이 특정값을 가지지 않는 요소
    • [attr^=val] 속성이 특정값으로 시작하는 요소
    • [attr$=val] 속성이 특정값으로 끝나는 요소
    • [attr~=val] 공백과 함께 특정값을 포함하는 요소 (car는 car와 일치하지만 cart와는 불일치)
  • 폼요소 셀렉터

    • :text <input type="text" />
    • :password <input type="password" />
    • :radio <input type="radio" />
    • :checkbox <input type="checkbox" />
    • :submit <input type="submit" />
    • :image <input type="image" />
    • :reset <input type="reset" />
    • :button <input type="button" />
    • :file <input type="file" />
    • :hidden <input type="hidden" />

jQuery(':text'); => type속성의 값이 text인 모든 input요소들

jQuery(':input:not(:hidden)'); => 눈에 보여지는 모든 input요소들

jQuery(':text, :textarea'); => type속성의 값이 text이거나 textarea인 모든 input요소들

  • 특성을 갖는 요소 선택

    jQuery('*').filter(function() { return !!jQuery(this).css('backgroundImage') });

    => 배경이미지를 갖는 모든 요소들

    => !!는 타입을 불린으로 변경하기 위함

    => jQuery함수의 인자인 this는 모든요소들(*) 중 filter에 인자로 전달되는 시점에 함수에 인자로 전달된 요소를 가리키는데 

        요소를 jQuery함수의 인자로 넘겨 jQuery메소드를 사용할 수 있도록 함

    jQuery('div').filter(function() { var width = jQuery(this).width(); return width>100&&width<200; });

    => 넓이가 100보다 크고 200보다 작은 모든 div요소들

  • 컨텍스트 매개변수

    • 컨텍스트란 jQuery가 셀렉터 식에 의해 매치되는 요소를 찾을 장소
    • jQuery에 의해 사용되는 기본 컨텍스트는 DOM계층에서 최상위 항목인 document임. 즉, jQuery('p')는 jQuery('p', 'document')와 같다

jQuery('p', '#content'); => id가 content인 요소의 하위 p요소들 (이때 #content가 p의 컨텍스트) => jQuery('#content p');와 같다

jQuery('form').bind('submit', function() { var allInputs = jQuery('input', this); });

=> form요소들 중 submit이벤트가 일어나면 allinputs변수에 이벤트가 일어난 form의 모든 input요소들을 저장


-----------------------------------------------------------------------------------------------------------------------

[Browser Events]
■ .error()
  선택된 개체(images, window, document 등)가 정확하게 로드(load)되지 않을 경우 발생하는 오류 이벤트
   - .bind('error', handler) 의 축약형

  .error( handler(eventObject) )  version 1.0
   (예) 
     1) <img src="missing.png" alt="Book" id="book" />
     2) $('#book').error(function() {  alert('Handler for .error() called.') }); // 이미지가 로드되지 않을 경우 오류 이벤트 발생
       
■ .resize()
  browser window의 사이즈가 변경될때 발생하는 이벤트
   - .bind('resize', handler) 의 축약형
   - .trigger('resize') 를 통하여 이벤트를 발생시킬 수 있다.

  .resize( handler(eventObject) ) version 1.0
   (예) $(window).resize(function() { $('#log').append('<div>Handler for .resize() called.</div>'); });

  .resize() version 1.0

■ .scroll()
  선택한 Element의 스크롤바가 움직일 경우 발생하는 이벤트
   - .bind('scroll', handler) 의 축약형
   - .trigger('scroll') 를 통하여 이벤트를 발생시킬 수 있다.

  .scroll( handler(eventObject) ) version 1.0
   (예) $('#target').scroll(function() { $('#log').append('<div>Handler for .scroll() called.</div>'); });


[Document  Loading]
■ .load()
  선택된 Element(URL : images, scripts, frames, iframes, 그리고 window object 등) 가 로드(load)가 완료되었을 때 발생하는 이벤트
   - .bind('load', handler) 의 축약형
   - "load" JavaScript event

  .load( handler(eventObject) ) version 1.0
    (예)
      1) <img src="book.png" alt="Book" id="book" />
      2) $('#book').load(function() { // Handler for .load() called. }); // 정상적으로 #book의 이미지가 로드되면 이벤트 발생
    (예) $('img.userIcon').load(function(){ if($(this).height() > 100) { $(this).addClass('bigImg'); } });
    (예) $(window).load(function () { // run code });

■ .ready()
  DOM이 준비된(완전히 로드된) 이후 발생하는 특별한 이벤트
   -  <body onload=""> 와 .ready() 는 양립할 수 없으며 둘중에 하나만 사용하도록 한다.
   -  또는 jQeury의 $(window).load() 함수에서 attach 해서 사용한다.

  .ready( handler ) version 1.0
   - $(document).ready(handler) == $().ready(handler) == $(handler) == $(document).bind("ready", handler)
   (예) $(document).ready(function() {
          // Handler for .ready() called.
        });
   
■ .unload()
  페이지가 unload될 때 발생하는 이벤트
   - "unload" 자바스크립트 이벤트
   - 이 이벤트는 브라우저별로 다르게 동작할 수 있다. (http://api.jquery.com/unload/ 참조)

  .unload( handler(eventObject) ) version 1.0
   (예) $(window).unload( function () { alert("Bye now!"); } );

[Event Handler Attachment]
■ .bind()
  선택된 element에 이벤트 핸들러를 붙인다.
   - blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, 
   - mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, 
   - change, select, submit, keydown, keypress, keyup, error

  .bind( eventType, [ eventData ], handler(eventObject) ) version 1.0
   (예) $('#foo').bind('click', function() { alert('User clicked on "foo."'); });
   (예) $('#foo').bind('mouseenter mouseleave', function() {  $(this).toggleClass('entered'); }); // 다중 이벤트
   (예) $("p").bind("click", function(event){ 
             var str = "( " + event.pageX + ", " + event.pageY + " )"; $("span").text("Click happened! " + str); 
        }); // 이벤트 핸들러에 event 인자 포함
   (예) $("p").bind("click", {foo: "bar"}, function(event){ alert(event.data.foo); }); // eventData 포함한 예제
   (예) 커스텀 이벤트(Bind custom events)

  .bind( events ) version 1.4
   (예)
      $("div.test").bind({
        click: function(){
          $(this).addClass("active");
        },
        mouseenter: function(){
          $(this).addClass("inside");
        },
        mouseleave: function(){
          $(this).removeClass("inside");
        }
      });

    (예) 참고 : http://api.jquery.com/bind/

■ .unbind()
  선택된 element의 선언된 이벤트 핸들러를 제거한다.

  .unbind( eventType, handler(eventObject) )
    (예) $('#foo').unbind();  // 선택된 element의 모든 이벤트 제거
    (예) $('#foo').unbind('click'); // click 이벤트를 제거
    (예) $('#foo').unbind('click', function() {  alert('The quick brown fox jumps over the lazy dog.'); }); // 이벤트를 제거하면서 함수동작

■ .delegate()
  선택된 Element의 selector의 이벤트 핸들러를 붙인다. (앞으로 추가될 element의 이벤트 핸들러도 적용된다.)
   - live()함수를 보완하여 만들어진 함수
   - http://honey83.cafe24.com/100

  .delegate( selector, eventType, handler ) version 1.4.2
   (예)
     $("table").delegate("td", "hover", function(){
       $(this).toggleClass("hover");
     });
   (예) $("body").delegate("a", "click", function() { return false; }) // 버블링 방지
   (예) $("body").delegate("a", "click", function(event){  event.preventDefault(); }); // 기본 동작을 취소
   
  .delegate( selector, eventType, eventData, handler ) version 1.4.2

   (예) 커스텀 이벤트 --> http://api.jquery.com/delegate/

■ .undelegate()
  선택된 Element의 이벤트 핸들러를 제거한다.
   - (예) http://api.jquery.com/undelegate/

  .undelegate() version 1.4.2
   - 모든 이벤트 제거
  .undelegate( selector, eventType ) version 1.4.2
   (예) $("body").undelegate("p", "click");
  .undelegate( selector, eventType, handler ) version 1.4.2
   (예) $("body").undelegate("p", "click", function(){ "Does nothing..." }); // 이벤트가 제거되면서 function()함수가 호출된다.

■ .live()
  선택된 element의 이벤트 핸들러를 바인드 한다.
   - bind()와의 차이점은 append()등의 함수로 추가된 요소들에도 이벤트가 적용된다.
   - 1.4.2버전 부터 live()함수를 보완한 delegate() 함수를 사용한다.
   -  eventType = click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
   
  .live( eventType, handler ) version 1.3
   (예) $("p").live("click", function(){ alert( $(this).text() ); });
   (예) $("a").live("click", function() { return false; }) // 버블링 방지
   (예) $("a").live("click", function(event){  event.preventDefault(); }); // 기본 동작을 취소

  .live( eventType, eventData, handler ) version 1.4
   (예) $("a").live("click", {foo: "bar"}, function(event){ alert(event.data.foo); });

■ .die()
  선택된 element의 이벤트 핸들러중 live()함수에 의해 바인드된 이벤트 핸들러를 제거한다.

  .die( eventType, [ handler ] ) version 1.4.1
   (예) $("p").die() // 모든 live 이벤트의 바인드를 제거한다.
   (예) $("#theone").die("click"); // live 이벤트의 click 바인드를 제거한다.
   (예) $("#theone").die("click", function(){ ... }); // die()함수가 호출되면서 function()함수가 호출된다.

■ .one()
   bind() 함수처럼 선택된 element에 이벤트 핸들러를 붙인다. 하지만 딱 한번의 이벤트를 발생시킨다.
    - 즉 bind() 함수의 이벤트 핸들러 내부에서 unbind()한다.

  .one( eventType, [ eventData ], handler(eventObject) ) version 1.1
   (예) $('#foo').one('click', function() { alert('This will be displayed only once.'); });
        == $('#foo').bind('click', function(event) { alert('This will be displayed only once.'); $(this).unbind(event); });

■ .jQeury.proxy()
  컨텍스트의 이벤트 핸들러를 리턴한다.
   (예) http://api.jquery.com/jQuery.proxy/

■ .trigger()
  선택된 element의 이벤트를 발생시킨다.

  .trigger( eventType, extraParameters ) version 1.0
   (예)
    $('#foo').bind('click', function() {
      alert($(this).text());
    });
    $('#foo').trigger('click');  

   (예) custom event 트리거
    $('#foo').bind('custom', function(event, param1, param2) {
      alert(param1 + "\n" + param2);
    });
    $('#foo').trigger('custom', ['Custom', 'Event']);

   (예)
    var event = jQuery.Event("logged");
    event.user = "foo";
    event.pass = "bar";
    $("body").trigger(event);

   (예) http://api.jquery.com/trigger/

■ .triggerHandler()
  trigger()함수와 비슷하게 동작한다.
   - 예외
      1) form submission에는 동작하지 않는다.
      2) 선택된 Element중 가장 첫번째 element만 영향을 미친다.
      3) 브라우저의 기본동작(default actions), bubbling, live events는 일어나지 않습니다. 단순히 handler 메서드를 호출만 합니다.
         http://api.jquery.com/triggerHandler/ 의 예제 참고

   
  .triggerHandler( eventType, extraParameters ) version 1.2

[Event Object]
  이벤트 핸들러(function(event)) 의 파라메터로 사용된다.
   - var e = jQuery.Event("click");

   멤버
    - event.currentTarget
    - event.data
    - event.isDefaultPrevented()
    - event.isImmediatePropagationStopped()
    - event.isPropagationStopped()
    - event.pageX
    - event.pageY
    - event.preventDefault()
    - event.relatedTarget
    - event.result
    - event.stopImmediatePropagation()
    - event.stopPropagation()
    - event.target
    - event.timeStamp
    - event.type
    - event.which

    (예) http://api.jquery.com/category/events/event-object/

[Form Events]
■ .focus()
  자바스크립트의 focus 이벤트
   - form 컨트롤의 포커스가 생겼을때 발생되는 이벤트

  .focus( handler(eventObject) )
   (예) $(select).focus(function( alert('focused'); ));

  .focus()
   -  trigger('focus')와 같은 기능을 제공

■ .blur()
  자바스크립트의 blur 이벤트 
   - form 컨트롤의 포커스를 잃어버림, focus이벤트의 반대기능

  .blur( handler(eventObject) ) version 1.0
   - .bind('blur', handler) 와 동일
   (예) $('#target').blur(function() { alert('Handler for .blur() called.'); });

  .blur() version 1.0
   -  trigger('blur')와 같은 기능을 제공

■ .change()
  자바스크립트의 change 이벤트 
   -선택박스, 텍스트박스, 체크박스, 라디오버튼 등의 입력값, 선택값 변경 이벤트

  .change( handler(eventObject) ) version 1.0
   -  .bind('change', handler) 와 동일
   (예) $('#target').blur(function() { alert('Handler for .change() called.'); });

  .change() version 1.0
   -  trigger('change')와 같은 기능을 제공

■ .select()
  자바스크립트의 select 이벤트 
   - <input type="text">와 <textarea> 에만 사용된다.
   - 텍스트가 선택될 때 발생되는 이벤트

  .select( handler(eventObject) ) version 1.0
   -  .bind('select', handler) 와 동일
   (예) $('#target').select(function() { alert('Handler for .select() called.'); });

  .select() version 1.0
   -  trigger('select')와 같은 기능을 제공

■ .submit()
  자바스크립트의 submit 이벤트 
   - <form> 요소에만 사용된다.
   - <input type="submit">, <input type="image">, or <button type="submit"> 에서 submit하는 기능

  .submit( handler(eventObject) ) version 1.0
   -  .bind('submit', handler) 와 동일
   (예) $('#target').submit(function() { return true; });

  .submit() version 1.0
   -  $('#target').submit(); == $('#target').trigger('submit')와 같은 기능을 제공

[Keyboard Events]
■ .focusin()
  자바스크립트의 focusin 이벤트 
   - .bind('focusin', handler). 와 동일
   - 선택된 element 또는 그 자식 element에 포커스가 생겼을때 발생되는 이벤트

  .focusin( handler(eventObject) ) version 1.4
   (예) $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });

■ .focusout()
  자바스크립트의 focusout 이벤트
   - .bind('focusout', handler). 와 동일하고 .focusin()와 반대기능
   - 선택된 element 또는 그 자식 element에 포커스를 잃었을때 발생되는 이벤트

  .focusout( handler(eventObject) ) version 1.4
   (예) http://api.jquery.com/focusout/

■ .keydown()
  자바스크립트의 keydown 이벤트
   - .bind('keydown', handler). 와 동일
   - 선택된 element가 포커스되어 있고 키보드를 누르고 있을때 발생되는 이벤트

  .keydown( handler(eventObject) ) version 1.0
   (예) http://api.jquery.com/keydown/
   (예) $('#target').keydown(function(event) { alert('Handler for .keydown() called.'); });

■ .keyup()
  자바스크립트의 keyup 이벤트
   - .bind('keyup', handler). 와 동일
   - 선택된 element가 포커스되어 있고 키보드를 누른 키보드를 띌 때 발생되는 이벤트

  .keyup( handler(eventObject) ) version 1.0
   (예) http://api.jquery.com/keyup/
   (예) $('#target').keyup(function(event) { alert('Handler for .keyup() called.'); });

■ .keypress()
  자바스크립트의 keypress 이벤트
   - .bind('keypress', handler). 와 동일
   - 선택된 element가 포커스되어 있고 키보드를 눌렀을때 발생되는 이벤트
   - 실제 키보드가 눌렸을때 발생되는 이벤트 순서 : keydown or keypress > keyup

  .keypress( handler(eventObject) ) version 1.0
   (예) http://api.jquery.com/keypress/
   (예) $('#target').keydown(function(event) { alert('Handler for .keydown() called.'); });

KeyDown, KeyPress, KeyUp Event 차이
 - http://mytory.textcube.com/495, http://hurrah.springnote.com/pages/1099088, http://winflahed.tistory.com/72

[Mouse Events]
■ .click()
  선택된 element를 클릭했을때 발생하는 이벤트

  .click( handler(eventObject) ) version 1.0
    (예) $('#target').click(function() { alert('Handler for .click() called.'); });

  .click() version 1.0
   - $('#target').click(); == $('#target').trigger('click');

■ .dblclick()
  선택된 element를 더블 클릭했을때 발생하는 이벤트

  .dblclick( handler(eventObject) ) version 1.0
    (예) $("p").dblclick( function () { alert("Hello World!"); });

  .dblclick() version 1.0
   - $('#target').click(); == $('#target').trigger('click');

■ .focusin()
  자바스크립트의 focusin 이벤트 
   - .bind('focusin', handler). 와 동일
   - 선택된 element 또는 그 자식 element에 포커스가 생겼을때 발생되는 이벤트

  .focusin( handler(eventObject) ) version 1.4
   (예) $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });

■ .focusout()
  자바스크립트의 focusout 이벤트
   - .bind('focusout', handler). 와 동일하고 .focusin()와 반대기능
   - 선택된 element 또는 그 자식 element에 포커스를 잃었을때 발생되는 이벤트

  .focusout( handler(eventObject) ) version 1.4
   (예) http://api.jquery.com/focusout/

■ .hover()
  선택된 element에 마우스가 올라갔을때와 밖으로 나왔을때에 발생되는 이벤트
   - hover()를 unbind()할 경우 = $(obj).unbind('mouseenter mouseleave');

  .hover( handlerIn(eventObject), handlerOut(eventObject) ) version 1.0
    (예)
         $("li").hover(
           function () {
             $(this).append($("<span> ***</span>"));
           }, 
           function () {
             $(this).find("span:last").remove();
           }
         );

■ .mouseover()
  자바스크립트의 mouseover 이벤트
   - 선택된 element에 마우스가 포인터가 올려졌을때 발생되는 이벤트
   - .bind('mouseover', handler) 와 동일,
   - 버블링관련 문제가 존재한다. 버블링을 피하려면 .mouseenter() 함수를 사용    (http://api.jquery.com/mouseover/)

  .mouseover( handler(eventObject) ) version 1.0
    (예)
       $("div.overout").mouseover(function() {
         i += 1;
         $(this).find("span").text( "mouse over x " + i );
       }).mouseout(function(){
         $(this).find("span").text("mouse out ");
       });

  .mouseover() version 1.0

■ .mouseout()
  자바스크립트의 mouseout 이벤트
   - 선택된 element에 마우스가 포인터가 빠져나왔을때 발생되는 이벤트
   - .bind('mouseout', handler) 와 동일,
   - 버블링관련 문제가 존재한다. 버블링을 피하려면 .mouseleave() 함수를 사용   (http://api.jquery.com/mouseover/)

  .mouseout( handler(eventObject) ) version 1.0
    (예)
       $("div.overout").mouseover(function() {
         i += 1;
         $(this).find("span").text( "mouse over x " + i );
       }).mouseout(function(){
         $(this).find("span").text("mouse out ");
       });

  .mouseout() version 1.0

■ .mouseenter()
  선택된 element에 마우스가 포인터가 올려졌을때 발생되는 이벤트
   - IE에서만 제공되는 mouseenter 자바스크립트 이벤트를 다른브라우저의 호환성을 위해 만들어짐
   - .bind('mouseenter', handler) 와 동일,
   - 비슷한 함수 = .mouseover() , 차이점 : 버블링의 발생여부

  .mouseout( handler(eventObject) ) version 1.0
    (예)
      $("div.enterleave").mouseenter(function(){
        $("p:first",this).text("mouse enter");
        $("p:last",this).text(++n);
      }).mouseleave(function(){
        $("p:first",this).text("mouse leave");
      });

  .mouseout() version 1.0

■ .mouseleave()
  선택된 element에 마우스가 포인터가 빠져나왔을때 발생되는 이벤트
   - IE에서만 제공되는 mouseleave 자바스크립트 이벤트를 다른브라우저의 호환성을 위해 만들어짐
   - .bind('mouseleave', handler) 와 동일,
   - 비슷한 함수 = .mouseout() , 차이점 : 버블링의 발생여부

  .mouseout( handler(eventObject) ) version 1.0
    (예) .mouseenter() 함수 예제 참고

  .mouseout() version 1.0

■ .mousemove()
  선택된 element에 마우스가 포인터가 움직일때 발생되는 이벤트
   - .bind('mousemove', handler) 와 동일,

  .mousemove( handler(eventObject) ) version 1.0
    (예) $("div").mousemove(function(e){ alert(e.pageX + " / " + e.pageY);  } );

  .mousemove() version 1.0

■ .mousedown()
  선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누를때 발생되는 이벤트
   - .bind('mousemove', handler) 와 동일,

  .mousedown( handler(eventObject) ) version 1.0
    (예) 
      $("p").mouseup(function(){
        $(this).append('<span style="color:#F00;">Mouse up.</span>');
      }).mousedown(function(){
        $(this).append('<span style="color:#00F;">Mouse down.</span>');
      });

  .mousedown() version 1.0

■ .mouseup()
  선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누른상태에서 띌 때 발생되는 이벤트
   - .bind('mouseup', handler) 와 동일,

  .mouseup( handler(eventObject) ) version 1.0
    (예) .mousedown() 함수 예제 참고

  .mousedown() version 1.0

■ .toggle()
  선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누른상태에서 띌 때 발생되는 이벤트

  .toggle( handlerA(eventObject), handlerB(eventObject), [ handlerC(eventObject) ] ) version 1.0
   - handlerA(eventObject) : 짝수번째 클릭시 이벤트
   - handlerB(eventObject) : 홀수번째 클릭시 이벤트
   - handlerC(eventObject) : 추가 핸들러로 클릭 후에 A,B 이벤트핸들러가 발생된 이후  발생되는 이벤트
   (예)
     $('#target').toggle(function() {
       alert('First handler for .toggle() called.');
     }, function() {
       alert('Second handler for .toggle() called.');
     });

  .toggle( [ duration ], [ callback ] ) version 1.0
   (예) http://api.jquery.com/toggle/ 참고