Jquery에서 일반적으로 사용되는 여러 선택기 사용 예의 차이점

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

1, :first, 첫 번째 요소를 선택합니다. 예를 들어 $("p:first")는 첫 번째 p 요소를 선택합니다
2, :last , $("p:last")와 같이 마지막 요소를 선택하여 마지막 p 요소를 선택합니다.
3. :not(선택기), $("p:와 같이 "선택기" 조건을 충족하지 않는 요소를 선택합니다. not(.className)"), 스타일이 className이 아닌 모든 p 요소를 선택합니다.
4. :even/:odd, index가 짝수/홀수인 요소(예: $("p:even"))를 선택하고 모두 선택 인덱스 번호가 짝수인 요소 p 요소
5, :eq(인덱스 번호)/:gt(인덱스 번호)/:lt(인덱스 번호), 인덱스 번호와 같은 요소/인덱스 번호보다 큰 요소/인덱스보다 작은 요소 선택 $("p:lt(3 )")와 같은 숫자, 인덱스 번호가 3보다 작은 모든 p 요소를 선택하세요.
참고:
혼합 필터 선택기를 사용할 때 후속 필터 조건은 이전 필터 선택기, 즉 필터링된 수준(예:
$("#t1 tr:gt(0):lt(3)").css("fontSize", "28") //lt(3) )는 gt(0)의 새로운 항목입니다. 시퀀스의 일련 번호는 lt(4)로 작성하면 안 됩니다.

두 번째, 핵심 사항
1. 다중 조건 선택기
다중 조건 선택기: $("p,p,span ,menuiitem"), p 태그와 p 태그를 동시에 선택하고, menuitem 스타일이 포함된 span 태그 요소
선택기 표현의 공백 수에 주의하세요. 실수하기 쉽습니다!

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

<table id="table1"> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
</table>

그러면 다음 js 코드를 사용하여 td
$("td", $(this)).css("Background", "red의 배경색을 조작할 수 있습니다. "), 이 코드가 사용됩니다. 이는 상대 선택자입니다. 선택된 td는 현재 tr 요소를 기준으로 합니다. 선택된 td 요소는 모두 현재 tr 요소 아래의 td 요소이며, 다른 행의 td 요소를 포함하지 않습니다.

<script type="text/
javascript
"> 
$(function () { 
$("#table1 tr").click(function () { 
$("td", $(this)).css("background", "red"); 
}); 
}); 
</script>

3. 계층적 선택기:
a $("#p li")는 p 아래의 모든 li 요소를 가져옵니다(자손, 자식, 자식의 자식....)
b $("#p > li" ) p 아래에서 직접 li 하위 요소를 가져옵니다. // 공백에 주의하세요.
c $(".menuitem + p") 일반적으로 사용되지 않는 스타일 이름 menuitem 다음에 첫 번째 p 요소를 가져옵니다.
d $(".menuitem ~ p")는 일반적으로 사용되지 않는 스타일 이름 menuitem 뒤에 있는 모든 p 요소를 가져옵니다.
세부 사항의 차이점은 다음과 같습니다(오류가 발생하기 쉬운 점):
다중 조건 선택기: $("p,p,span,menuitem"), 상대 선택기: $("td", $(this)).css(" background" , "red")", 계층적 선택기: $("#p li")는 p 아래의 모든 li 요소를 가져옵니다(자손, 자식, 자식의 자식...)

세 가지의 차이점은 다음과 같습니다.
1. 다중 조건 선택자: "" 내에서 쉼표로 구분됨,
2. 상대 선택자: 2개 요소로 구분됨,
3. "" 내에서 공백으로 구분된 계층적 선택자

샘플 코드는 다음과 같습니다.

위 내용은 Jquery에서 일반적으로 사용되는 여러 선택기 사용 예의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!