[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를 선택
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이 아닌 것
