의사 클래스 selectors_jquery 사용에 대한 jQuery 지침

jQuery 선택기의 강력한 점은 기본 CSS 선택기뿐 아니라 다양한 CSS 의사 클래스 선택기도 지원하며 선택기를 사용자 정의할 수도 있다는 것입니다. 일부 의사 클래스 선택기를 살펴보겠습니다.

:nth-child 사용법
nth-child는 jQuery에서 구현되는 CSS3 의사 클래스 선택기입니다. Jquery API에서 nth-child의 정의는 다음과 같습니다. "상위 요소 아래의 첫 번째 요소와 일치합니다. N개의 하위 또는 홀수 짝수 요소"입니다. 읽을 때 약간 복잡하게 느껴지므로 예를 들어 설명하겠습니다.

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

                                                    
 

four

 

다섯

 

여섯;/ li>
 

세븐

                                                      🎜>

2

3

4

6

 

7

 

8

 

9

< /ul>
                                                                                  
작동 효과는 다음과 같습니다.






API 정의에서 상위 요소를 일치시킨다는 것은 선택한 요소의 상위 요소가 다른 경우 별도로 선택된다는 의미입니다. 위의 예에서는 총 18개의

이 선택되었으나, 이 18개의
은 서로 다른 2개의
에 속하므로, Put이면 2개가 선택됩니다. 동일한
을 사용하여 위 코드를 실행한 다음:

위의 일치하는 상위 요소를 이해한 후 이 선택자 매개변수의 사용법에 대해 이야기해 보겠습니다.

위와 같이 선택한 위치를 직접 지정하지만 여기서 이 위치는 0n이 아닌 1로 시작한다는 점에 유의하세요. 다중 선택 방법, 예를 들어 3n 1, -3n 1, 4n 등을 n의 배수와 일치시킬 수 있습니다. 모든 페이지에 존재 예:

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

                                                                                      리>

     >       ("li:nth-child(3n-1)").css("배경색", "파란색");
< ;/스크립트>

효과:

해당 요소가 일치하는 것을 볼 수 있습니다

3. 또 다른 사용법은 다음과 같이 잘 알려진 홀수와 짝수입니다.

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

효과:

:첫째&막내

위의 n번째 자식에서 "부모 클래스 일치"의 의미를 알 수 있습니다. 첫 번째 자식과 마지막 자식도 마찬가지입니다.

first-child와 nth-child(1)은 동일하므로 여기서는 자세히 설명하지 않겠습니다.

첫 번째 자식의 경우 부모 클래스 아래의 마지막 자식 요소와 일치하는 동등한 nth-child 표현식을 아직 찾을 수 없습니다.
효과:

: 입력이 입력과 일치하지 않습니다

모두가 선택기에 익숙하다고 생각하지만 입력 의사 클래스 선택기는 태그와 일치할 뿐만 아니라 및 :<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="39390" class="copybut" id="copybut39390" onclick="doCopy('code39390')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code39390"> <br>첫 번째: <input type="input" /> <br> 두 번째:<select id="select"> <p></select><br>세 번째 항목:<textarea>

선택됨

의사 클래스 선택자는 중첩 가능

일반적으로 의사 클래스 선택자를 중첩하여 필요한 효과를 얻을 수 있습니다.

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

• 1


• 2


• 3

;li>4

• 5


• 6

;7

                                                                                                                               



효과:

첫 번째와 마지막 li를 제외하고 나머지는 모두 선택되어 있음을 알 수 있습니다. 물론 중첩 수준 수에는 제한이 있습니다. (전문가들은 기억해 주세요. ) 어쨌든, 변태 없이 사용하기에 충분합니다:-)

사용자 정의 의사 클래스 선택기

jquery는 또한 원래 선택기를 확장하는 방법을 제공하므로 필요에 따라 선택기를 사용자 정의할 수 있습니다. 실제 예제를 통해 이를 수행하는 방법을 살펴보겠습니다.

jquery의 직렬화 메서드를 사용하여 현재 양식의 요소를 서버에 제출할 때 항상 asp.net의 ViewState()를 선택하는데, 이는 의심할 여지 없이 많은 리소스를 낭비합니다. 확장된 의사 클래스 선택기를 사용하여 선택하지 않는 방법을 확인합니다.

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

<입력 유형= "숨겨진" 이름 ="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRWxo4mg/noF3 7k/L7nyw13HVnLQ==" />

" id") === "_VIEWSTATE";

}
Alert($(":input:noViewState").size());//alert 0 ViewState가 선택되지 않았습니다.

 

 


$.expr을 통해 의사 클래스 선택기를 확장하면 위의 선택기가 noViewState를 사용한 후에 viewState가 그렇지 않음을 알 수 있습니다.
선정되었습니다.

요약:

jQuery의 의사 클래스 선택기는 매우 강력한 기능을 내장하고 있어 선택하기 편리합니다. 이러한 의사 클래스 선택기를 중첩하거나 확장할 수 있어 js 프로그래밍이 더욱 즐거워집니다. .

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.