'Event'에 해당되는 글 2건

  1. 2010.07.22 [jquery] Events (이벤트)
  2. 2010.06.25 [jquery] Selector (선택자)
2010. 7. 22. 01:17
[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/ 참고

Posted by CoolDragon
2010. 6. 25. 19:17
[jquery core]
jQuery( selector, [ context ] )
 - $("input:radio", document.forms[0]);
 - $("div", xml.responseXML);
 - $('span', this) == $(this).find('span')

jQuery( element )
 - $("div")

jQuery( elementArray )
 - $("div > p")

jQuery( html, [ ownerDocument ] )
 - $("<div/>", {
                 "class": "test",
                 text: "Click me!",
                 click: function(){
                     $(this).toggleClass("test");
                 }
}).appendTo("body");


jQuery( callback )
 - jQuery(function() {} ); == jQuery(function($) { });

jQuery.noConflict(); :많은 자바스크립트 라이브러리가 $ 변수명을 사용한다. 
                     jQeury에서 $가 alias로 사용되기 때문에 jQuery.noConflict(); 구문은 jQuery에서 $를 사용하지 않겠다는 의미이다.
                     noConflict()를 호출하고서 $를 사용하는 방법
       jQuery.noConflict();
                        (function($) { 
                            $(function() {
                                // more code using $ as alias to jQuery
                             });
                         })(jQuery);


[Basic]
jQuery('*') : 모든 Element를 선택, 즉 전체를 선택
 (예) jquery("*").css("border", "1px");

jQuery('.class') : css 클래스명이 같은 Element를 선택
 (예) <div class="item"/> -> jquery(".item").css("height", "100px");
 (예) jquery(".item .color").css("height", "100px"); //css 클래스를 복수개로 설정하면 해당하는 element가 선택됨

jQuery('element') : element명과 같은 Element를 선택
 (예) ("div") 처럼 태그명을 직접 넣을 수 있다.

jQuery('#id') : html 태그의 id가 같은 Element를 선택 (id는 한개만 존재하므로 한개만 선택됨)
 (예) <div id="myDiv">id="myDiv"</div> -> jquery("#myDiv").css("border","3px solid red");<

jQuery('selector1, selector2, selectorN') : 다중 셀렉터 (예) $("div,span,p.myClass")

[Basic Filter]
jQuery(':animated') : 애니메이션되고있는 Element를 선택
 (예) http://api.jquery.com/animated-selector/

jQuery(':eq(index)') : index번째의 Element를 선택, Zero-based index
 (예) jQuery('div:eq(2)') 라고 할 경우 3번째  div요소를 의미한다.

jQuery(':gt(index)') : index 번째 Element보다 큰 모든 Element를 선택, Zero-based index
 (예) jQuery('div:gt(2)') 라고 할 경우 2보다 큰 div요소이므로 3번째부터 선택된 div요소 모두를 의미한다.

jQuery(':lt(index)') : index 보다 작은 Element를 선택, Zero-based index
 (예) jQuery('div:lt(2)') 라고 할 경우 2보다 작 div요소이므로 1,2번째 div요소를 의미한다.

jQuery(':even') : index 짝수번째 Element를 선택, (index의0, 2, 4...), zero-indexed
 
jQuery(':odd') : index 홀수번째 Element를 선택, (index의 1, 3, 5...), zero-indexed  
 (예) $("tr:odd").css("background-color", "#bbbbff");

jQuery(':not(selector)') : 해당 selector가 아닌 Element를 선택
 (예) $("input:not(:checked)").css("background-color", "yellow");

jQuery(':header') : h1, h2, h3과 같은 Element를 선택

jQuery(':first') : 첫번째 Element를 선택
 (예) jQuery('div:first') == $("div:eq(0)") == $("div:lt(1)")

jQuery(':last') : 선택한 Element중 마지막 Element를 선택

[Child Filter]
jQuery(':first-child') :  부모 Element의 첫번째 자식 Element를 선택
 (예) jQuery(':first-child') == jQuery(':nth-child(1)')
 (예) jQeury("tr td:first-child") => tr이 복수개일 경우 그중 자식요소 중에 td의 첫번째 요소들이 선택된다.

jQuery(':last-child') : 부모 Element의 자식 Element중 마지막 Element를 선택
 (예) jQeury("tr td:last-child") => tr이 복수개일 경우 그중 자식요소 중에 td의 마지막 요소들이 선택된다.

jQuery(':nth-child(index/even/odd/equation)') : 부모 Element의 자식 index번째의 Element, index는 1부터 시작 
 (예) $("ul li:nth-child(2)") // ul 요소의 2번째 li요소들을 선택
 (예) $("ul li:even") // ul 요소의 짝수번째 li요소들을 선택
 (예) $("ul li:odd") // ul 요소의 홀수번째 li요소들을 선택
 (예) $("ul li::nth-child(3n)) // 3*0, 3*1, 3*2, ... 번째 요소들을 선택

jQuery(':only-child') : 부모Element의 자식Element가 딱 한개만 존재하는 Element
 (예) 
  <div>
    <button>Sibling!</button>
    <button>Sibling!</button>
  </div>

  <div>
    <button>Sibling!</button>
  </div>

  // 위의 첫번째 div는 button 자식요소가 2개이므로 선택에서 제외되고 아래 button이 한개인 button만 선택된다.
  $("div button:only-child").text("Alone").css("border", "2px blue solid"); 

[Filter]
jQuery(':contains(text)') : text를 포함한 Element를 선택
 (예) $("div:contains('John')") -> <div>~~~~ John~~~</div> 처럼 자식 Content에 John을 포함한 요소들이 선택된다.

jQuery(':empty') : <td></td>, <span/> 처럼 content가 없는 Element를 선택, 반대는 :parent
 (예) $("td:empty").text("Was empty!")

jQuery(':has(selector)') : selector에 해당하는 요소를 자식요소로 포함하는 Element를 선택
 (예) $("div:has(p)") -> <div><p>Hello in a paragraph</p></div>
 
jQuery(':parent') : 텍스트를 포함하고 있고 선택한 부모 Element 
 (예) <tr><td>abcd</td><td></td></tr> // $("td:parent").fadeTo(1500, 0.3); // 이럴 경우 abcd만 선택한다.

[Attribute]
jQuery('[attribute|=value]') : value와 같거나 value + 하이픈(-) 으로 시작하는 Element
jQuery('[attribute*=value]') : % + value + %
jQuery('[attribute$=value]') : % + value
jQuery('[attribute^=value]') : value + %
jQuery('[attribute~=value]') : value와 단어가 같은 Element
jQuery('[attribute=value]')  : value와 같은 Element
jQuery('[attribute!=value]') : value와 다른 Element
jQuery('[attribute]') : 해당 attribute가 존재하는 Element (예) $("div[id]")
jQuery('[attributeFilter1][attributeFilter2][attributeFilterN]') : 다중 속성 셀렉터 (예) $("input[id][name$='man']")

[Form]
jQuery(':button') : <input type="button"/> 또는 <button />
jQuery(':checkbox') : <input type="checkbox"/>, jQuery(':checkbox') == $('[type=checkbox]'), $(':checkbox') == $('*:checkbox'), 보통 $('input:checkbox') 형태
jQuery(':checked') : 체크박스에 체크된 Element
jQuery(':selected') : 콤보박스에 선택된 Element
jQuery(':disabled') : <input name="email" disabled="disabled" />
jQuery(':enabled') : 활성화되어있는 Element (jQuery(':disabled') 과 반대 )
jQuery(':file') : <input type="file"/> $(':file') == $('*:file'), 보통  $('input:file') 형태
jQuery(':image') : <input type="image" />
jQuery(':input') : <input />, <textarea />, <select />, <button />
jQuery(':password') : <input type="password" /> , $(':password') == $('[type=password]'), $(':password') == $('*:password'), 보통 $('input:password') 형태
jQuery(':radio') : <input type="radio" />, $(':radio') == $('[type=radio]'), $(':radio') == $('*:radio'), 보통 $('input:radio') 형태 (예) $('input[name=gender]:radio')
jQuery(':reset') : <input type="reset" /> (예) $("input:reset")
jQuery(':selected') : <option selected="selected">....</option> (예) $("select option:selected")
jQuery(':submit') : <input type="submit" />, <button type="submit">Button type="submit"</button> 또는 <button/>,  단 <button/>은 브라우저마다 type="submit"은 기본이 아닐 수 있다.
jQuery(':text') : <input type="text" />, $(':text') == $('[type=text]'), $(':text') == $('*:text'), 보통 $('input:text') 형태


[Hierarchy]
jQuery('parent > child') : parent(부모)의 child(자식) Element를 선택
 (예) $("div > span") -> <div><span>test</span></div>

jQuery('ancestor descendant') : ancestor 하위의 모든 descendant에 해당하는 Element를 선택
 (예) $("form input") // form 태그 하위의 input 태그 모두를 선택

jQuery('prev + next') : prev Element 다음에 나오는 형제 Element를 선택
 (예) $("label + input").css("color", "blue").val("Labeled!")

jQuery('prev ~ siblings') : prev Element 다음에 나오는 모든 형제 Element를 선택
 (예) $("#prev ~ div").css("border", "3px groove blue");

[Visibility Filter]
jQuery(':hidden')
  (1) display:none; 인 것 // visibility:hidden or opacity: 0 은 보이는 것으로 간주
  (2) type="hidden" 인 것 
  (3) width:0; height:0; 인 것 
  (4) 부모 Element가 hidden 인 것 

jQuery(':visible') : jQuery(':hidden')의 정반대 
  (1) display:none; 가 아닌 것 // visibility:hidden or opacity: 0 은 보이는 것으로 간주
  (2) type="hidden" 가 아닌 것 
  (3) width:0; height:0; 가 아닌 것 
  (4) 부모 Element가 hidden이 아닌 것 
 

Posted by CoolDragon