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