jquery_jquery의 다중 조건 선택기, 상대 선택기 및 계층적 선택기의 차이점-JS 튜토리얼-php.cn

1. Jquery에서 일반적으로 사용되는 필터 선택기는 다음과 같습니다.

1. :first, $("div:first")와 같은 첫 번째 요소를 선택합니다.

2. :last, 마지막 요소 선택(예: $("div:last")는 마지막 div 요소 선택

3. :not(선택기), "selector" 조건을 충족하지 않는 요소 선택 , 예를 들어 $("div:not(.className)")은 스타일이 className

이 아닌 모든 div 요소를 선택합니다. 4. :even/:odd, 다음과 같이 짝수/홀수 인덱스가 있는 요소를 선택합니다. $("div :even"), 짝수 색인 번호를 가진 모든 div 요소 선택

5, :eq(색인 번호)/:gt(색인 번호)/:lt(색인 번호), 다음과 같음 선택 인덱스 번호/인덱스보다 큰 숫자/인덱스 번호보다 작은 요소(예: $("div:lt(3)")), 인덱스 번호가 3보다 작은 모든 div 요소를 선택합니다.

참고: 혼합 사용

필터 선택기 중 후속 필터링 조건은 이전 필터링 선택기로 필터링한 후 다시 번호 매기기를 기반으로 한다는 점, 즉 필터링은

과 같이 단계별로 수행된다는 점을 기억하세요. $("#t1 tr:gt(0):lt (3)").css("fontSize", "28"); //lt(3)은 gt(0)의 새 시퀀스에 있는 일련 번호입니다. lt(4)

두 번째, 초점

다중 조건 선택기
다중 조건 선택기: $( "p,div,span,menuitem"), p 태그, div 태그 및 menuitem 스타일이 있는span 태그 요소를 동시에 선택하세요.
선택기 표현식에는 공백이 더 많거나 적을 수 없다는 점에 유의하세요. 실수하다!

상대 선택자

$()에 두 번째 매개변수를 지정하는 한 두 번째 매개변수는 상대 요소입니다. 예를 들어 html 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
 td>dsfdef ;/tr> ;td>dsds tr> 
 dsdsdsfdef
dsfdef
 
 td 
$("td", $(this)).css("Background ", "red")의 배경색을 조작하기 위해 다음 js 코드를 사용합니다. 이 코드는 상대 선택기를 사용하고 선택한 td는 현재 tr 요소. 선택한 td 요소는 현재 tr 요소 아래의 모든 td 요소이며, 다른 행에 관련된 td 요소는 없습니다

코드 복사

코드는 다음과 같습니다.