jQuery 선택기
jQuery 선택기
이전 장에서는 HTML 요소를 선택하는 방법에 대한 몇 가지 인스턴스를 보여 줍니다.
관건은 jQuery 선택기가 효과를 적용하고자 하는 요소를 어떻게 정확하게 선택하는지 배우는 것입니다.
jQuery 요소 선택기와 속성 선택기를 사용하면 태그 이름, 속성 이름 또는 컨텐트를 통해 HTML 요소를 선택할 수 있습니다.
선택기를 사용하여 HTML 요소 그룹 또는 개별 요소를 조작할 수 있습니다.
HTML DOM 용어:
선택기를 사용하여 DOM 요소 그룹 또는 개별 DOM 노드를 조작할 수 있습니다.
jQuery 요소 선택기
jQuery는 CSS 선택기를 사용하여 HTML 요소를 선택합니다.
$("p")

요소를 선택합니다.
$("p.intro") 모든class="intro"의

요소를 선택합니다.
$("p#demo") 모든 id="demo"의

요소를 선택합니다.
jQuery 속성 선택기
jQuery는 XPath 표현식을 사용하여 지정된 속성이 있는 요소를 선택합니다.
$([href])href 속성이 있는 모든 요소를 선택합니다.
$("[href='#']") href 값이 "#"과 같은 모든 요소를 선택합니다.
$("[href!='#']") href 값이 "#"과 같지 않은 모든 요소를 선택합니다.
$("[href$='.jpg']") 모든 href 값이 ".jpg"로 끝나는 요소를 선택합니다.
jQuery CSS 선택기
jQuery CSS 선택기를 사용하여 HTML 요소의 CSS 속성을 변경할 수 있습니다.
다음 예제에서는 모든 p 요소의 배경색을 빨간색으로 변경합니다.
인스턴스

$("p").css("background-color","red");

jQuery 선택기 참조 안내서
선택기
인스턴스
선택
*
$("*")
모든 요소
#id
$("#lastname")
id= "lastname"요소
.class
$(".intro")
모든class="intro"요소
element
$("p")
모든

요소
.class.class
$(".intro.demo")
모든class="intro"및class="demo"요소
 
 
 
:first
$("p:first")
첫 번째

원소
:last
$("p:last")
마지막

요소
:even
$("tr:even")
모든 짝수 요소
:odd
$("tr:odd")
모든 홀수 요소
 
 
 
:eq(index)
$("ul li:eq(3)")
목록의 네 번째 요소 (index 0부터)
:gt(no)
$("ul li:gt(3)")
index가 3보다 큰 요소 나열
:lt(no)
$("ul li:lt(3)")
index가 3보다 작은 요소 나열
:not(selector)
$("input:not(:empty)")
비어 있지 않은 모든 input 요소
 
 
 
:header
$(":header")
모든 제목 요소

-

:animated
 
모든 애니메이션 요소
 
 
 
:contains(text)
$(":contains('W3School')")
지정된 문자열을 포함하는 모든 요소
:empty
$(":empty")
하위 노드가 없는 모든 요소
:hidden
$("p:hidden")
모든 숨겨진

요소
:visible
$("table:visible")
모든 보이는 테이블
 
 
 
s1,s2,s3
$("th,td,.intro")
일치하는 선택이 있는 모든 요소
 
 
 
[attribute]
$("[href]")
href 속성을 가진 모든 요소
[attribute=value]
$("[href='#']")
모든 href 속성의 값이 "#"과 같은 요소
[attribute!=value]
$("[href!='#']")
모든 href 속성의 값이 "#"의 요소와 같지 않습니다.
[attribute$=value]
$("[href$='.jpg']")
모든 href 속성의 값은 ".jpg"로 끝나는 요소를 포함합니다
 
 
 
:input
$(":input")
모든 요소
:text
$(":text")
모든 type="text"의 요소
:password
$(":password")
모든 type="password"의 요소
:radio
$(":radio")
모든 type="radio"의 요소
:checkbox
$(":checkbox")
모든 type="checkbox"의 요소
:submit
$(":submit")
모든 type="submit"의 요소
:reset
$(":reset")
모든 type="reset"의 요소
:button
$(":button")
모든 type="button"의 요소
:image
$(":image")
모든 type="이미지"의 요소
:file
$(":file")
모든 type="file"의 요소
 
 
 
:enabled
$(":enabled")
활성화된 모든 input 요소
:disabled
$(":disabled")
모든 비활성화된 input 요소
:selected
$(":selected")
선택한 모든 input 요소
:checked
$(":checked")
선택한 모든 input 요소