07/01/2019, 14:29

JQuery API: :submit Selector

Submit Selector sẽ lựa chọn tất cả các phần tử có type="submit". Submit Selector sẽ hoạt động đối với các thẻ input có type="submit" hoặc các thẻ button . Lưu ý rằng một số trình duyệt coi một thẻ button hoàn toàn giống với một thẻ input có ...

Submit Selector sẽ lựa chọn tất cả các phần tử có type="submit".

Submit Selector sẽ hoạt động đối với các thẻ input có type="submit" hoặc các thẻ button. Lưu ý rằng một số trình duyệt coi một thẻ button hoàn toàn giống với một thẻ input có type="submit" trong khi một số khác thì không, do vậy để đảm bảm submit selector sẽ hoạt động trên mọi trình duyệt và luôn lựa chọn đúng các phần tử submit bạn nên đặt thuộc tính type="submit".

Chú ý: Bởi vì :submit là một Jquery extension và không phải là một phần thiết lập của CSS, các truy vấn sử dụng :submit sẽ không thể phát huy hiệu quả của phương thức querySelectorAll(). Để đạt được hiệu quả cao nhất, sử dụng input[type="submit"], button[type="submit"] để thay thế.

Cú pháp

Cú pháp
jQuery( ":submit" )

Ví dụ

Tìm kiếm các phần tử có type="submit" 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>
        <form>
            <table id="exampleTable" border="1" cellpadding="10">
                <tr>
                    <th>
                        Element Type
                    </th>
                    <th>
                        Element 
                    </th>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="Input Button">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="password">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        <select><option>Option</option></select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button>Button</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button type="submit">Button type="submit"</button>
                    </td>
                </tr>
            </table>
        </form>
        <hr>
        <button onclick="myFunction()">Click vào đây để xem kết quả</button>
        <script>
            function myFunction(){
                var submitEl = $( "td :submit" )
                .parent( "td" )
                .css({
                  background: "yellow",
                  border: "3px red solid"
                })
              .end();
                $( "#exampleTable" ).find( "td" ).each(function( i, el ) {
                    var inputEl = $( el ).children(),
                    inputType = inputEl.attr( "type" ) ? " type='" + inputEl.attr( "type" ) + "'" : "" ;
                    $( el ).before( "<td>" + inputEl[ 0 ].nodeName + inputType + "</td>" );
                })
            }
        </script>
    </body>
</html>

Kết quả:

Tham khảo: jquery.com

Nguồn: code24h.com

0