Jquery 레벨 선택을 작성하는 방법

웹 프런트 엔드 기술의 지속적인 개발과 업데이트로 인해 jQuery는 매우 강력하고 사용하기 쉬우며 많은 일반적인 웹 개발 작업을 쉽게 처리할 수 있기 때문에 많은 프런트 엔드 개발자의 첫 번째 선택이 되었습니다. 그 중 하나는 다음과 같습니다. 계층적 선택. 이번 글에서는 jQuery의 계층적 선택기를 사용하는 방법을 소개하겠습니다.

계층적 선택기를 사용하면 특정 요소의 하위 요소나 상위 요소를 선택하는 등 DOM 트리에서 특정 노드를 선택할 수 있습니다. 계층적 선택기는 공백 문자(' ')로 구분된 선택기로 구성되며, 각 선택기는 선택 세트로 선택을 제한합니다. 예를 들어, "div p"는 Div 요소 내의 모든 P 요소를 선택합니다. 다음 표에는 일반적으로 사용되는 계층적 선택기가 나열되어 있습니다.

표 1: jQuery에서 일반적으로 사용되는 계층적 선택기

선택기 설명

선택기 1 > 선택기 2 선택기 2는 선택기 1의 직계 하위 요소입니다.

선택기 1 선택기 2 선택기 2는 선택자 1의 자손 요소입니다.

선택자 1 + 선택자 2 선택자 2는 선택자 1의 다음 형제 요소입니다.

선택자 1 ~ 선택자 2 선택자 2는 모두 선택자 1 다음의 형제 요소입니다.

위의 선택자를 이해한 후, DOM 트리에서 노드를 선택하기 위해 계층적 선택기를 구축해 볼 수 있습니다. 다음 예에서는 모든 목록 항목(li) 요소의 직접 부모를 선택합니다.

$( "li" ).parent();

여기서는 parent() 메서드를 사용하여 각 목록 항목의 직접 부모를 선택했습니다. 다음으로, 각 상위 요소의 다음 형제 요소를 추가로 선택할 수 있습니다.

$( "li" ).parent().next();

여기서는 next() 메서드를 사용하여 각 목록 항목의 직접 상위 요소의 다음 형제 요소를 선택했습니다. next() 메서드를 사용하여 다음 요소를 선택하는 대신 prev() 메서드를 사용하여 이전 요소를 선택할 수도 있습니다.

직계 부모 및 형제 요소 외에도 자식 또는 하위 요소를 선택할 수도 있습니다. 다음 예에서는 "wrapper" 클래스가 있는 모든 요소 내의 모든 단락(p) 요소를 선택합니다.

$( ".wrapper p" ).css( "background-color", "yellow" );

여기서는 "wrapper" 클래스가 포함된 요소를 단락 요소와 구분하기 위해 공백을 사용했습니다. 다음 예와 같이 ">" 선택기를 사용하여 직접 하위 요소를 선택할 수도 있습니다.

$( ".wrapper > p" ).css( "background-color", "yellow" );

여기에서는 ">" 선택기를 사용하여 "wrapper" 클래스에 직접 포함된 단락 요소를 선택했습니다. . 이제 계층적 선택기에 대해 더 잘 이해했으므로 이를 자체 코드에 더 잘 적용할 수 있습니다.

요약:

이 글에서는 독자의 이해를 돕기 위해 jQuery의 계층적 선택기를 소개하고 몇 가지 샘플 코드를 제공했습니다. 계층적 선택기를 사용하면 특정 요소의 하위 요소나 상위 요소를 선택하는 등 DOM 트리에서 특정 노드를 선택할 수 있습니다. 이러한 선택기를 이해하면 jQuery 작업을 더 잘 이해하는 데 도움이 됩니다.

위 내용은 Jquery 레벨 선택을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!