jQuery :first 선택기, :first-child 선택기와 first()의 차이점-JS 튜토리얼-php.cn

jQuery :first 선택기, :first-child 선택기와 first()의 차이점

黄舟

풀어 주다： 2017-06-23 14:35:21

원래의

1787명이 탐색했습니다.

:first 첫 번째 요소를 가져옵니다.

:first-child 선택기는 상위 요소의 첫 번째 하위 요소인 모든 요소를 선택합니다.

first()는 선택한 요소의 첫 번째 요소를 반환합니다.

테스트 코드는 다음과 같습니다.

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    <ul>  
        <li>ul_1 item 1</li>  
        <li>ul_1 item 2</li>  
        <li>ul_1 item 3</li>  
        <li>ul_1 item 4</li>  
        <li>ul_1 item 5</li>  
    </ul>  
    <ul>  
        <li>ul_2 item 1</li>  
        <li>ul_2 item 2</li>  
        <li>ul_2 item 3</li>  
        <li>ul_2 item 4</li>  
        <li>ul_2 item 5</li>  
    </ul>  
</body>  
</html>

로그인 후 복사

첫 번째 테스트: 먼저 코드는 다음과 같습니다.

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
<script type="text/javascript">  
    $(function(){  
        $("ul li:first").css("background-color","yellow");  
    })  
 </script>

로그인 후 복사

효과는 다음과 같습니다.

jQuery :first 선택기, :first-child 선택기와 first()의 차이점

첫 번째 항목만 선택됩니다.

테스트: first-child , 코드는 다음과 같습니다

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
<script type="text/javascript">  
    $(function(){  
        $("ul li:first-child").css("background-color","yellow");  
    })  
 </script>

로그인 후 복사

효과는 다음과 같습니다.

jQuery :first 선택기, :first-child 선택기와 first()의 차이점

각 ul의 첫 번째 li 요소가 선택된 것으로 나타났습니다.

Test first(), 코드는 다음과 같습니다

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
<script type="text/javascript">  
    $(function(){  
        $("ul li").first().css("background-color","yellow");  
    })  
 </script>

로그인 후 복사

The 효과는 다음과 같습니다:

jQuery :first 선택기, :first-child 선택기와 first()의 차이점