집 > 기사 > 웹 프론트엔드 > Jquery: 첫 번째 하위 선택기에 대한 심층적인 이해

Jquery: 첫 번째 하위 선택기에 대한 심층적인 이해

黄舟원래의: 2017-06-23 14:28:301517검색

개요

첫 번째 하위 요소 일치

':first'은 하나의 요소만 일치하는 반면, 이 선택기는 각 상위 요소에 대해 하나의 하위 요소와 일치합니다.

예

설명:

각 ul에서 첫 번째 항목 찾기 li

HTML 코드:

<ul> 
<li>John</li> 
<li>Karl</li> 
<li>Brandon</li> 
</ul> 
<ul> 
<li>Glen</li> 
<li>Tane</li> 
<li>Ralph</li> 
</ul>

jQuery 코드:

$("ul li:first-child")

결과:

[ <li>John</li>, <li>Glen</li> ]

$("p:first-child") 정의:

부모에 속하는 요소 선택 및 첫 번째 요소 모든 형제 요소 중 p는 다음과 같습니다.

예제 코드

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8">
        <title>first-child选择器</title>
        <script src="../../jquery.min.js">
        </script>

        <script>
            $(document).ready(function(){
                $("p:first-child").css("background-color","red");
            });        </script>
    </head>

    <body>
        <p>the first paragraph in body</p>

        <div style="border:1px solid;">
            <p>The first paragraph in div.</p>
            <p>the last paragraph in div.</p>
        </div><br>

        <div style="border:1px solid;">
            <span>This is a span element.</span>
            <p>The first paragraph in another div.</p>
            <p>The last paragraph in another div.</p>
        </div>
    </body></html>

DOM 트리 구조

Jquery: 첫 번째 하위 선택기에 대한 심층적인 이해

Jquery: 첫 번째 하위 선택기에 대한 심층적인 이해

관련 기사