14/08/2018, 09:44

:first-child Selector trong jquery

First-child Selector sẽ lựa chọn phần tử con đầu tiên của phần tử cha nào đó. Trong khi :first chỉ có thể trả tìm kiếm duy nhất một phần tử, :first-child selector có thể tìm kiếm phần tử con đầu tiên cho nhiều phần tử cha(xem ví dụ để hiểu rõ hơn). Cú pháp ...

First-child Selector sẽ lựa chọn phần tử con đầu tiên của phần tử cha nào đó.

Trong khi :first chỉ có thể trả tìm kiếm duy nhất một phần tử, :first-child selector có thể tìm kiếm phần tử con đầu tiên cho nhiều phần tử cha(xem ví dụ để hiểu rõ hơn).

Cú pháp

Cú pháp
jQuery( ":first-child" )

Ví dụ

Tìm kiếm thẻ span đầu tiên của các thẻ div và đổi màu cho chúng:

Code RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Học lập trình miễn phí tại code24h.com</title>
        <script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <h1>Học lập trình miễn phí tại code24h.com</h1>
    
        <div>
            <span>PHP</span>
            <span>Css</span>
            <span>HTML</span>
        </div>
        <div>
            <span>Glen,</span>
            <span>Tane,</span>
            <span>Ralph</span>
        </div>
        <button onclick="myFunction()">Click vào đây để xem kết quả</button>
        <script>
            function myFunction(){
                $( "div span:first-child" ).css( "color", "red");
            }
        </script>
    </body>
</html>

Kết quả:

Tham khảo: jquery.com

Các loại api khác

  • jQuery Selector
  • jQuery Events

Nguồn: code24h.com

0