jQuery 계층적 선택기

레벨 선택기

$(s1 s2) [Father and Son]

파생 선택기: s1 내부의 모든 s2 노드 가져오기(레벨에 관계없이)

$ (" divspan")

<div>
    <span></span>
    <p>
        <span></span>
    </p>
</div>
<span></span>

$(s1 > s2) [parent-child]

직접 하위 요소 선택기: s1 내부에서 s2의 하위 요소 노드를 가져옵니다

$("div > ; "span")

    <div>
        <span></span>
        <p>
            <span></span>
        </p>
        <span></span>
    </div>
<span></span>

$(s1 + s2) [Brother]

직접 형제 선택기: s1, s1 바로 뒤에 첫 번째 형제 관계의 s2 노드를 가져오고 사이에는 다른 태그가 있을 수 없습니다. s2, 그렇지 않으면 작동하지 않습니다

$("div +span")

<div>
    <span></span>
    <p>
        <span></span>
    </p>
    <span></span>
</div>
<span></span>
<span></span>
<div></div>
<span></span>

$(s1 ~ s2) [Brothers]

모든 형제는 팔로우 관계 노드 선택기: Get s1

$("div ~span")

<div>
    <span></span>
    <p>
        <span></span>
    </p>
    <span></span>
</div>
<span></span>
<span></span>
<p></p>
<span></span>

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script >
        function f1(){
            //$(s1 s2)
            $('div span').css('background-color','blue');

            //$(s1 > s2) 
            $('div > span').css('background-color','green');//张飞 关羽

            //$(s1 + s2) 紧紧挨着的
            $('div + span').css('background-color','red');

            //$(s1 ~ s2)
           $('div ~ span').css('background-color','brown');
        }
        </script>
    </head>
    <body>
        <h2>层次选择器</h2>
        <div>
            <span>北京</span>
            <p>
                <span>上海</span>
            </p>
            <span>深圳</span>
        </div>
        <p>南京</p>
        <span>杭州</span>
        <p>厦门</p>
        <span>天津</span>
        <div>重庆</div>
        <span>合肥</span>
        <input type="button" value="触发" onclick="f1()" />
    </body>
</html>

참고: 4개의 선택기 중 나머지 3개를 주석 처리하세요. 하나씩 테스트해보세요

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script > function f1(){ //$(s1 s2) $('div span').css('background-color','blue'); //$(s1 > s2) $('div > span').css('background-color','green');//张飞关羽 //$(s1 + s2) 紧紧挨着的 $('div + span').css('background-color','red'); //$(s1 ~ s2) $('div ~ span').css('background-color','brown'); } </script> </head> <body> <h2>层次选择器</h2> <div> <span>北京</span> <p> <span>上海</span> </p> <span>深圳</span> </div> <p>南京</p> <span>杭州</span> <p>厦门</p> <span>天津</span> <div>重庆</div> <span>合肥</span> <input type="button" value="触发" onclick="f1()" /> </body> </html>

제출하다 코드 재설정

자동운전