07/01/2019, 14:11

JQuery API: All Selector (“*”)

all-selector được sử dụng khi muốn chọn toàn bộ các phần tử html. Cú pháp Cú pháp jQuery( "*" ) Lưu ý : toàn bộ các selector sẽ được chọn khi sử dụng all selector, tuy nhiên nếu sử dụng nó kết hợp với một ...

all-selector được sử dụng khi muốn chọn toàn bộ các phần tử html.

Cú pháp

Cú pháp
jQuery( "*" )

Lưu ý: toàn bộ các selector sẽ được chọn khi sử dụng all selector, tuy nhiên nếu sử dụng nó kết hợp với một selector có nhiều kết quả, nó sẽ mang ý nghĩa là chọn toàn bộ các phần tử của selector đó( xem ví dụ để hiểu rõ hơn).

Ví dụ

Ví dụ 1: Tìm tất cả các phần tử bao gồm cả các thẻ head, body, link, script ... Lưu ý rằng nếu trình duyệt của bạn được thêm các Add-on và các Add-on đó sẽ thêm các thẻ <script> hoặc các thẻ <link> thì những thẻ này cũng sẽ được all-selector chọn:

Code RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>all demo</title>
        <style>
            h3 {
                margin: 0;
            }
            h1, span, p {
                margin-top: 10px;
                margin-bottom: 10px;
                float: left;
                awidth: 100%;
                display: block;
                background-color: #EEEEEE;
            }
        </style>
        <script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <div id="container">
            <h1>Học lập trình miễn phí tại code24h.com</h1>
            <p>Thẻ P</p>
            <span>SPAN</span>
        </div>
        <button onclick="myFunction()">Click vào đây để xem kết quả</button>
        <script>
            function myFunction(){
                var elementCount = $( "*" ).css( "border", "1px solid red" ).length;
                $( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
            }
        </script>
    </body>
</html>

Kết quả:

Ví dụ 2: Sử dụng all-selector kết hợp với selector để tìm kiếm tất cả các phần tử nằm trong thẻ div có id = container:

Code RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>all demo</title>
        <style>
            h3 {
                margin: 0;
            }
            h1, span, p {
                margin-top: 10px;
                margin-bottom: 10px;
                float: left;
                awidth: 100%;
                display: block;
                background-color: #EEEEEE;
            }
        </style>
        <script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <div id="container">
            <h1>Học lập trình miễn phí tại code24h.com</h1>
            <p>Thẻ P</p>
            <span>SPAN</span>
        </div>
        <button onclick="myFunction()">Click vào đây để xem kết quả</button>
        <script>
            function myFunction(){
                var elementCount = $( "#container" ).find( "*" ).css( "border", "1px solid red" ).length;
                $( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
            }
        </script>
    </body>
</html>

Kết quả:

Tham khảo: jquery.com

Nguồn: code24h.com

0