Perbedaan $(input) dan $(:input) dalam JQuery ~ Nyintak

Apa saja perbedaan $(input) dan $(:input), simak penjelasan berikut supaya anda tidak salah menggunakan dan dapat menghemat waktu dalam koding.

$(:input) memilih semua elemen tag input, textarea, dan button, sedangkan $(input) hanya memilih semua elemen dengan tag input.

Menggunakan $(input)

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('input[type="submit"]').click(function(){
                $('input').each(function(){
                    alert($(this).val());
                });
            });
        });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>First Name :</td>
                <td colspan="3"><input type="text" placeholder="First Name"/></td>
            </tr>
            <tr>
                <td>Last Name :</td>
                <td colspan="3"><input type="text" placeholder="Last Name"/></td>
            </tr>
            <tr>
                <td>Gender :</td>
                <td><input type="radio" value="Male" name="gender" checked>Male</input></td>
                <td colspan="2"><input type="radio" value="Female" name="gender">Female</input></td>
            </tr>
            <tr>
                <td>Skills :</td>
                <td><input type="checkbox" value="JavaScript" name="skills">JavaScript</input></td>
                <td><input type="checkbox" value="JQuery" name="skills">JQuery</input></td>
                <td><input type="checkbox" value="HTML" name="skills">HTML</input></td>
            </tr>
            <tr>
                <td>Country :</td>
                <td><select>
                        <option selected="selected" value="Indonesia">Indonesia</option>
                        <option value="USA"USA</option>
                        <option value="UK(English)">UK(English)</option>
                    </select></td>
            </tr>
            <tr>
                <td><input type="submit" value="submit"/></td>
            </tr>
        </table>
    </body>
</html>

Menggunakan $(:input)

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('input[type="submit"]').click(function(){
                $(':input').each(function(){
                    alert($(this).val());
                });
            });
        });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>First Name :</td>
                <td colspan="3"><input type="text" placeholder="First Name"/></td>
            </tr>
            <tr>
                <td>Last Name :</td>
                <td colspan="3"><input type="text" placeholder="Last Name"/></td>
            </tr>
            <tr>
                <td>Gender :</td>
                <td><input type="radio" value="Male" name="gender" checked>Male</input></td>
                <td colspan="2"><input type="radio" value="Female" name="gender">Female</input></td>
            </tr>
            <tr>
                <td>Skills :</td>
                <td><input type="checkbox" value="JavaScript" name="skills">JavaScript</input></td>
                <td><input type="checkbox" value="JQuery" name="skills">JQuery</input></td>
                <td><input type="checkbox" value="HTML" name="skills">HTML</input></td>
            </tr>
            <tr>
                <td>Country :</td>
                <td><select>
                        <option selected="selected" value="Indonesia">Indonesia</option>
                        <option value="USA"USA</option>
                        <option value="UK(English)">UK(English)</option>
                    </select></td>
            </tr>
            <tr>
                <td><input type="submit" value="submit"/></td>
            </tr>
        </table>
    </body>
</html>

Memilih input text saja menggunakan $(:input)

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('input[type="submit"]').click(function(){
                $(':input[type="text"]').each(function(){
                    alert($(this).val());
                });
            });
        });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>First Name :</td>
                <td colspan="3"><input type="text" placeholder="First Name"/></td>
            </tr>
            <tr>
                <td>Last Name :</td>
                <td colspan="3"><input type="text" placeholder="Last Name"/></td>
            </tr>
            <tr>
                <td>Gender :</td>
                <td><input type="radio" value="Male" name="gender" checked>Male</input></td>
                <td colspan="2"><input type="radio" value="Female" name="gender">Female</input></td>
            </tr>
            <tr>
                <td>Skills :</td>
                <td><input type="checkbox" value="JavaScript" name="skills">JavaScript</input></td>
                <td><input type="checkbox" value="JQuery" name="skills">JQuery</input></td>
                <td><input type="checkbox" value="HTML" name="skills">HTML</input></td>
            </tr>
            <tr>
                <td>Country :</td>
                <td><select>
                        <option selected="selected" value="Indonesia">Indonesia</option>
                        <option value="USA"USA</option>
                        <option value="UK(English)">UK(English)</option>
                    </select></td>
            </tr>
            <tr>
                <td><input type="submit" value="submit"/></td>
            </tr>
        </table>
    </body>
</html>

Lalu, manakah yang performanya lebih baik antara $(input[type="text"]) dan $(:input[type="text"])?
Ya, tentu saja $('input[type="text"]') lebih baik dari $(:input[type="text"]), dikarenakan $(:input[type="text"]) harus mendeteksi semua elemen input, textarea, select, dll. Sedangkan $(input[type="text"]) hanya mendeteksi elemen input. Jadi kesimpulannya, jika anda ingin menemukan elemen dengan tag input, lebih baik menggunakan $(input[type="text"]) daripada $(:input[type="text"]).

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Tuesday 31 May 2016

Perbedaan $(input) dan $(:input) dalam JQuery

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels