Pengertian, Contoh dan Penjelasan JQuery #Id Selector ~ Nyintak

Kali ini saya akan menjelaskan secara detil tentang selector #Id dalam JQuery, dan artikel ini adalah lanjutan dari artikel sebelumnya yang berjudul "Apa itu JQuery Selector". Dan dibawah ini adalah inti inti penting yang telah saya ringkas sedemikian rupa untuk menghemat waktu belajar anda.

JQuery #Id Selector menggunakan fungsi document.getElementById() yang ada pada JavaScript.
JQuery #Id Selector adalah selector yang paling efisien dibanding JQuery Selector lainnya, ini dikarenakan jika kita mengetahui id dari sebuah elemen, kita tinggal memanggil idnya dan menggunakannya.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("#button1").click(function(){
                alert('Button 1 DiKlik!');
            });
            $("#button2").css("background-color","green");
        });
        </script>
    </head>
    <body>
        <input type="button" id="button1" value="Button 1"/>
        <input type="button" id="button2" value="Button 2"/>
    </body>
</html>

Elemen HTML yang mempunyai ID harus unik(tidak ada id yang sama antara elemen yang satu dengan yang lainnya) dalam sebuah halaman, jika ada yang sama maka JQuery #Id Selector hanya akan memproses elemen yang pertama.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("#button1").click(function(){
                alert('Button DiKlik!');
            });
            $("#button1").css("background-color","yellow");
        });
        </script>
    </head>
    <body>
        <input type="button" id="button1" value="Button 1"/>
        <input type="button" id="button1" value="Button 2"/>
    </body>
</html>

Fungsi JavaScript document.getElementById() menghasilkan error jika elemen dengan id yang dicari tidak ditemukan, lain halnya dengan JQuery #Id Selector, ia tidak akan menghasilkan error. Untuk mengecek jika sebuah elemen ditemukan, kita bisa menggunakan fungsi length dari JQuery.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("#button1").click(function(){
                alert($("#cari").length);
            });
        });
        </script>
    </head>
    <body>
        <input type="button" id="button1" value="Klik disini untuk menemukan length id yang dicari"/>
        <p id="cari"></p>
    </body>
</html>

JavaScript document.getElementById() dengan JQuery(#id) Selector tidaklah sama. document.getElementById() menghasilkan mentahan objek DOM(Document Object Model), sedangkan JQuery(#id) selector menghasilkan objek JQuery yang telah terbungkus objek DOM dan siap diberi method. Ini adalah alasan mengapa kita dapat memanggil method JQuery seperti css(), click(), trigger() di objek yang dihasilkan JQuery, untuk mendapatkan objek DOM pokok dari JQuery menggunakan

$("#id")[0];, [0] = urutan dari jumlah id (#id) yang tersedia.
atau
$("#id");

document.getElementById() membutuhkan waktu proses yang lebih singkat dibanding JQuery("#id") Selector. Biasakan menggunakan document.getElementById() dibanding JQuery("#Id") selector kecuali jika kita membutuhkan fungsi tambahan yang disediakan oleh JQuery tersendiri.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            var time = new Date();
            var start = time.getSeconds();
            var starts = time.getMilliseconds();
            document.getElementById("getElementById").innerHTML = "waktu proses doc.getElementById = " + (time.getSeconds() - start).toString()+ "," + (time.getMilliseconds() - starts).toString();
            $("#idSelector").text("waktu proses Jquery id selector = " + (time.getSeconds() - start).toString() + "," + (time.getMilliseconds() - starts).toString());
             
        });
        </script>
    </head>
    <body>
        <p id="getElementById"></p>
        <br/>
        <p id="idSelector"></p>
    </body>
</html>

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Wednesday 1 June 2016

Pengertian, Contoh dan Penjelasan JQuery #Id Selector

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels