날카로운 jQuery 핵심 포인트 요약(1) jQuery selector_jquery

1 기본 선택기

$(#id)
주어진 ID를 기반으로 요소와 일치
$(.class)
주어진 클래스 이름을 기반으로
$(element)
요소와 일치합니다. 주어진 요소를 기반으로
$(*) 요소와 일치합니다. name
모든 요소와 일치
$(selector1,selector2,...,selectorN)
각 선택기와 일치하는 요소를 병합하여 함께 반환합니다

2 계층적 선택기

$("ancestorDescendant")
조상 요소의 모든 하위 요소 선택
$( "parent > child" )
상위 요소 아래의 하위(하위 수준) 요소만 선택합니다. 이는 $("ancestorDescendant")와는 달리 모든 하위 요소(하위 수준을 포함하되 이에 국한되지 않음)를 선택합니다. 🎜>
$('prev next') 이전 요소 바로 뒤의 다음 요소 선택

$('prev ~ siblings') 이전 요소 선택


3 필터 선택기

3.1 기본 필터 선택기

$(" 선택기: first") 첫 번째 요소 선택

$("selector:last") 마지막 요소 선택

$("selector :not( selector2)") 주어진 선택기와 일치하는 모든 요소 제거

$("selector:even") 짝수인 모든 요소 선택, 색인은 다음에서 시작됩니다. 0

$("selector:odd") 인덱스가 홀수인 모든 요소를 ​​선택합니다. 인덱스는 0부터 시작합니다

$("selector:eq( index)" ) 인덱스가 index와 같은 요소를 선택하세요. 인덱스는 0부터 시작합니다.

$("selector:gt(index)") index보다 큰 인덱스를 가진 요소를 선택하세요. 인덱스는 0부터 시작

$("selector:lt(index)") 인덱스보다 작은 인덱스를 가진 요소를 선택하세요. 인덱스는 0부터 시작합니다

$(":header ") h1, h2, h3 등 모든 제목 요소를 선택합니다.

$(":animated") 현재 애니메이션 중인 모든 요소를 ​​선택합니다


3.2 콘텐츠 필터 선택기

$(":contains(text)") 텍스트가 포함된 콘텐츠를 "text" 요소로 선택

$(":empty") 하위 요소나 텍스트를 포함하지 않는 빈 요소를 선택하세요

$(":has(selector2)") 선택기와 일치하는 요소를 포함하는 요소 선택

$(":parent") 하위 요소 또는 텍스트가 포함된 요소 선택


3.3 표시되는 성적 필터 선택기

$(":hidden") 보이지 않는 요소 모두 선택

$(":visible") 보이는 모든 요소 선택


3.4 속성 필터 선택기

$("selector[attribute]") 이 속성을 가진 요소 선택

$("selector[attribute=value]") 속성 값이 값인 요소를 선택하세요

$("selector[attribute! =value]") 속성 값이 값과 같지 않은 요소 선택

$("selector[attribute^=value]") 값이 있는 속성 값 선택 시작 요소

$("selector[attribute$=value]") 속성 값이 값으로 끝나는 요소를 선택하세요.

$("selector[attribute*= value]") 속성 값에 값이 포함된 요소 선택

$("selector[selector2][selectorN]") 속성 선택기를 사용하여 여러 조건을 충족하는 복합 속성 선택기로 병합 정황. 선택될 때마다 범위가 좁아집니다. 예를 들어 $("div[id][title$='test']")는 속성 id가 있는
요소

를 선택합니다. 속성 제목은 "test"로 끝납니다.
3.5 하위 요소 필터 선택기

$(":nth-child(index/even/odd/equation)") 각 상위 요소 선택 요소 아래의 인덱스 하위 요소 또는 홀수 짝수 요소, 인덱스는 1부터 시작

$("selector:first-child") 의 첫 번째 하위 요소 선택 각 상위 요소

$("selector:last-child") 각 상위 요소의 마지막 하위 요소 선택

$("selector:only-child") 요소가 상위 요소의 유일한 하위 요소인 경우 일치됩니다.상위 요소에 다른 요소가 포함되어 있으면 일치하지 않습니다.

3.6 양식 객체 속성 필터 선택기

$(" 선택기 :enabled")
사용 가능한 요소 모두 선택
$("selector:disabled")
비활성화된 요소 모두 선택
$("selector :checked ")
선택한 모든 요소 선택(라디오, 체크박스)
$("selector:selected")
선택한 모든 옵션 요소 선택(선택)

4 양식 선택기

$(":input")
,, <select>,<button>요소 모두 선택 <br><strong>$(":text")</strong><br> 한 줄짜리 텍스트 상자 모두 선택<br><strong>$(":password")</strong><br> 비밀번호 상자 모두 선택<br><strong>$(":radio")</strong><br> 모든 라디오 상자 선택<br><strong>$(":checkbox")</strong><br> 모든 확인란 선택<br><strong> $(":submit")</strong><br> 모든 제출 버튼 선택<br><strong>$(":image")</strong><br> 모든 이미지 버튼 선택<br><strong>$(": 재설정")</strong><br> 모든 재설정 버튼 선택<br><strong>$(":button")</strong><br> 모든 버튼 선택<br><strong>$(":file")</strong><br> 업로드 도메인 모두 선택<strong><br>$(":hidden")</strong><br> 보이지 않는 요소 모두 선택</button></select>