Front-end

jQuery CSS 선택자

개발자 키우기 2023. 12. 12. 14:45

Attribute 

 

$( "p[attribute|='value']" ) 문자열이 같거나 시작 문자열이 같고 -으로 이어진 문자열 (value value-kim)
$( "p[attribute*='value']" ) 문자열이 포함 (%value%)
$( "p[attribute~='value']" ) 공백으로 구분된 특정 문자열을 포함 (value attr)
$( "p[attribute$='value']" ) 마지막 문자열이 일치 (aabbvalue)
$( "p[attribute='value']" )  정확히 일치 (value)
$( "p[attribute!='value']" ) 일치하지 않는 값 (attr)
$( "p[attribute^='value']" )  시작하는 문자열이 같은 경우 (valuetttt)
$( "p[attribute]" )          어트리뷰트 값을 가지고 있는 경우 (value값은 상관없음)
$( "p[attributeFilter1][attributeFilter2][attributeFilterN]" ) 다중 가능

 

 

Basic

 

$( "*" )       모든 요소
$( ".class" )  클래스명과 일차하는 모든 요소
$( "#id" )     아이디명과 일치하는 요소
$( "element" ) 테그명과 일치하는 모든 요소
$( "selector1, selector2, selectorN" ) 다중 가능

 

 

Basic Filter

 

$( "div:animated" )   해당 태크 안에서 애니메이션이 진행 중인 모든 요소
$( "div:eq(index)" )  해당 태그의 인덱스번호와 일치하는 요소
$( "p:even" )         해당 태그에서 인덱스가 짝수인 모든 요소
$( "p:odd" )          해당 태그에서 인덱스가 홀수인 모든 요소
$( "p:first" )        해당 태그에서 인덱스가 0인 요소
$( "p:last" )         해당 태그에서 인덱스가 마지막인 요소
$( "p:focus" )        해당 태그에서 포커스되는 요소
$( "p:gt(index)" )    해당 태크의 인덱스번호보다 큰 모든 요소
$( "p:lt(index)" )    해당 태크의 인덱스번호보다 작은 모든 요소
$( ":header" )        h1,h2,h3,h4,h5 요소
$( "div:lang(language)" ) 해당 태크에서 정확히 일치하는 언어의 모든 요소
$( "div:not(selector)" )  해당 태크에서 일치하지 않는 모든 요소
$( ":root" )          루트 선택 (항상 <HTML> 선택)

 

 

Child Filter

 

$( "div p:first-child" ) div 요소의 첫번째 하위 요소가 p면 선택
$( "div p:last-child" )  div 요소의 마지막 하위 요소가 p면 선택
$( "div p:first-of-type" )  div 요소의 p의 첫번째 요소
$( "div p:last-of-type" )   div 요소의 p의 마지막 요소
$( "div p:nth-child(2)" )   div 요소의 두번째 요소가 p면 선택
$( "div p:nth-child(2n)" )  div 요소의 2의 배수의 요소가 p면 선택
$( "div p:nth-last-child(2)" )   div 요소의 마지막에서 두번째 요소가 p면 선택
$( "div p:nth-last-child(2n)" )  div 요소의 마지막에서 2의 배수의 요소가 p면 선택
$( "div p:nth-of-type(2)" )      div 요소의 p요소 중에서 두번째 요소
$( "div p:nth-last-of-type(2)" ) div 요소의 p의 마지막에서 두번째 요소
$( "div p:only-child" )          div 요소에서 요소가 하나면서 p 태그면 선택
$( "div p:only-of-type" )        div 요소에서 p요소가 하나면 선택

 

 

Content Filter

 

$( "div:contains(value)" ) div 태그내에 하위까지 text가 value와 일치하는 모든 요소 (%value%)
$( "p:empty" )             p 태그 중에서 text가 없는 모든 요소
$( "div:has(p)" )          div 태그안에 p가 있는 모든 div 요소
$( "td:parent" )           td에서 하위 태그나 text가 있는 요소

 

 

Form

 

$( ":button" )   모든 버튼 요소
$( ":checkbox" ) 모든 체크박스 요소
$( ":file" )     모든 파일첨부 요소
$( ":image" )    모든 이미지 요소
$( ":input" )    모든 인풋 요소
$( ":password" ) 모든 패스워드 요소
$( ":radio" )    모든 라디오 요소
$( ":reset" )    모든 리셋 요소
$( ":submit" )   모든 서브밋 요소
$( ":text" )     모든 텍스트 요소
$( ":checked" )  체크되거나 선택된 모든 요소
$( ":disabled" ) 설정이 해제된 모든 요소
$( ":enabled" )  설정이 해제되지 않은 모든 요소
$( ":selected" ) 선택된 모든 요소

 

 

Hierarchy

 

$( "parent > child" )  부모에서 한단계 아래 하위 자식 요소
$( "div tr td" )       div 하위의 tr 하위의 td 요소
$( "label + input" )   input 태크 이전에 형제 래밸의 label이 있는 input 요소(인접형제선택자)
$( "#prev ~ div" )     id가 prev인 요소 이후에 모든 형제 div 요소(일반형제선택자)

 

 

Visibility Filter

 

$( ":hidden" )  type="hidden" 이나 "display:none;" 인 모든 요소
$( ":visible" ) type="hidden" 이나 "display:none;" 가 아닌 모든 요소

 

 

참고 사이트 ( https://api.jquery.com/category/selectors/ )

 

Selectors | jQuery API Documentation

Select all elements that are in the progress of an animation at the time the selector is run. Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). Selects elem

api.jquery.com