jQuery의 자손 선택기 조상 자손 소개 및 예제 분석

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

참고: 선택기 하위 요소의 검색 범위는 "조상 요소", "손자" 또는 "하위" 요소의 하위 요소인지 여부에 관계없이 "조상 요소"의 하위 요소입니다.

하위 요소만 찾으려면 하위 선택기(상위 > 하위)를 사용하세요. Re Grammar

// 这里的ancestor表示具体的祖先选择器
// 这里的descendant表示具体的后代选择器
jQuery( "ancestor descendant" )

매개변수

매개변수

Ancestor 효과적인 조상 선택기입니다.

descendant 유효한 하위 항목 선택기입니다.

반환 값

상위 선택기와 일치하는 DOM 요소 내에서 발견된 하위 선택기와 일치하는 DOM 요소를 캡슐화하는 jQuery 객체를 반환합니다.

조상 선택기와 일치하는 DOM 요소가 없거나, 조상 선택기와 일치하는 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>

이제 ID가 n1인 태그에서 모든 p 태그를 한 번에 찾으려면 다음 jQuery 코드를 작성할 수 있습니다.

// 选择了id分别为n2、n4的2个元素
$("#n1 p");
如果要一次性查找到p标签内的所有span标签，则对应的jQuery代码如下(上述示例HTML中所有的span标签都包括在内)：
// 选择了id分别为n3、n5、n6的3个元素
$("p span");
当然，祖先选择器和后代选择器可以是任意有效的选择器，因此它们本身也可以是一个"祖先-后代"选择器。
// 选择了id为n6的一个元素
$("#n1 p.detail span.c");

위 내용은 jQuery의 자손 선택기 조상 자손 소개 및 예제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!