jQuery 하위 선택기 상위 > 하위 사용법에 대한 자세한 설명

jQuery의 상위 > 하위 선택기(하위 선택기)는 상위 요소의 모든 하위 요소를 일치시키고 이를 jQuery 객체로 캡슐화하여 반환하는 데 사용됩니다.

참고: 선택기 하위의 검색 범위는 "손자" 및 이후 요소를 제외한 "상위 요소"의 하위 요소여야 합니다.

모든 하위 요소를 검색하려면 descendant 선택기(ancestor descendant)를 사용하세요.

Grammar

// 这里的parent表示具体的父辈选择器
// 这里的child表示具体的子辈选择器
jQuery( "parent > child" )

> 기호 양쪽의 공백은 생략할 수 있지만 생략하지 않는 것이 좋습니다. 그렇지 않으면 문자가 너무 가까워서 읽기에 영향을 미칠 수 있습니다. 매개변수

매개변수 Parent에서 효과적인 상위 선택기를 설명합니다.个Child는 상위 선택 장치의 하위 요소를 일치시키는 데만 사용되는 효과적인 하위 선택기입니다.

반환 값

상위 요소에 있는 조건부 하위 요소를 압축한 JQuery 개체로 돌아갑니다.

상위 선택기와 일치하는 DOM 요소가 없거나 상위 선택기와 일치하는 DOM 요소 내에서 하위 선택기와 일치하는 하위 요소가 발견되지 않으면 빈 jQuery 객체가 반환됩니다.

상위 선택기와 일치하는 상위 DOM 요소가 여러 개 있을 수 있으며, 하나의 상위 DOM 요소 내에서 여러 하위 DOM 요소가 발견될 수 있습니다. 반환된 jQuery 객체는 조건을 충족하는 모든 DOM 요소를 캡슐화합니다.

예제 및 설명

다음 HTML 코드를 예로 들어보세요.

<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Hello</span>
    </p>
    <p id="n4" class="detail">
        <span id="n5" class="b codeplayer">World
            <span id="n6" class="c">365mini.com</span>
        </span>
    </p>
</div>

이제 p 태그의 모든 범위 하위 요소를 한 번에 찾으려면 다음 jQuery 코드를 작성하면 됩니다.

// 选择了id分别为n3、n5的两个元素
// n6不是p标签的子元素，而是孙子辈的元素，因此无法匹配
$("p > span");

다음 , we 스팬 태그의 스팬 하위 요소를 찾으려면 다음 jQuery 코드를 작성할 수 있습니다.

// 选择了id为n6的一个元素
$("span > span");

모든

요소 선택기

(*)를 함께 사용하여 손자 요소만 검색하는 선택기를 구현할 수 있습니다. 예: ID가 n1인 요소의 손자에 대한 범위 태그를 찾고 싶습니다. 해당 jQuery 코드는 다음과 같습니다.

위 내용은 jQuery 하위 선택기 상위 > 하위 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!