1. Home
  2. JQuery
  3. Pengenalan JQuery

Pengenalan JQuery

02:11
SAUNGIT.WEB.ID – Pengenalan JQuery. Jquery merupakan salah satu library Javascript yang populer digunakan oleh para web developer. Jquery dibuat agar mempermudah programmer dalam menggunakan Javascript. Jika Anda terbiasa dengan Javascript dan mulai mencoba Jquery, maka Anda akan merasakan kemudahan yang lebih baik ketika menggunakan Jquery.

Jquery mempunyai beberapa fitur yang bisa digunakan, yaitu:

  • Manipulasi HTML/DOM
  • Manipulasi CSS
  • Event HTML
  • Efek/ Animasi
  • Ajax

Alasan Menggunakan Jquery


  • Sintax Jquery cukup sederhana dengan kemampuan yang sangat powerfull
  • Support plugin seperti Jquery UI, Jquery Mobile dan masih banyak lagi
  • Banyak perusahaan teknologi dunia yang menggunakannya, seperti Google, Microsoft, IBM, Netflix dan lain-lain.

Cara Menggunakan Jquery

Ada 2 cara menggunakan Jquery:

  1. Mendownload langsung dari situs resmi di https://jquery.com dan menggunakannya seperti penggunaan internal Javascript.
  2. Menggunakan Content Delivery Network (CDN).

Sintaks JQuery

Sintaks JQuery didesign khusus untuk mencari dan mengambil elemen HTML dan menerapkan beberapa aksi pada elemen tersebut.

1# Sintaks Dasar: 
$(selector).action().

Penjelasan:

  • $: merupakan object JQuery
  • selector: parameter  pencarian elemen, bisa menggunakan CSS selector
  • action(): aksi yang akan diterapkan pada elemen hasil pencarian

Contoh Sintaks JQuery:

  • $(this).hide() - Menyembunyikan elemen saat ini.
  • $("p").hide() - Menyembunyikan semua elemen dengan tag p.
  • $(".test").hide() - Menyembunyikan semua elemen yang memiliki class test.
  • $("#test").hide() - Menyembunyikan elemen dengan id test.

2# Document Ready

 Sebaiknya code JQuery berada di dalam fungsi document ready, contohnya sebagai berikut:

$(document).ready(function(){
// code
});

Dengan meletakkan perintah fungsi seperti di atas,  maka perintah kita akan dieksekusi setelah seluruh tag HTML telah berhasil diload oleh web browser. Ini berguna untuk menghindari error yang terjadi karena object yang ingin dimanipulasi belum tersedia.

Selectors JQuery

Meskipun Jquery adalah library Javascript, namun selectors JQuery meniru fitur milik CSS selectors, seperti contoh berikut:

  • $(“p”) → selectors berdasarkan nama tag
  • $(“#nama”) → selectors berdasarkan nama id
  • $(“.nama”) → selectors berdasarkan nama class
  • $(“[href]”) → selectors  berdasarkan nama atribut
  • $(“p.warna”) → selectors berdasarkan tag <p> yang memiliki class warna
  • Dan lain-lain


1# Contoh Berdasarkan TAG

 
<html>
<head>
    <title>Latihan JQuery</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <button>Sembunyikan Paragraf</button>
</body>
</html>

Ketik script di atas lalu simpan dengan nama latihanjquery1.html lalu buka browser. Pastikan komputer Anda terkoneksi dengan internet karena pada tutorial kali ini menggunakan JQuery dari sumber lain.

 Hasilnya:
Gambar 1 - Pengenalan JQuery

 Agar JQuery dapat bekerja, silahkan klik tombol Sembunyikan Paragraf, maka hasilnya:

Gambar 2 - Pengenalan JQuery


2# Contoh Berdasarkan ID

 
<html>
<head>
    <title>Latihan JQuery</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#sembunyikan").click(function(){
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <button id="sembunyikan">Sembunyikan Paragraf</button>
</body>
</html>

Perhatikan bagian yang kami cetak tebal. Kami menambahkan ID pada button. Agar pada saat diklik button bisa bekerja, maka perlu menambahkan ID pada JQuery dengan simbol "#" dan diikuti nama IDnya.

Untuk hasil akan sama saja seperti gambar 1 dan 2.

 3# Contoh Berdasarkan CLASS

 
<html>
<head>
    <title>Latihan JQuery</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".sembunyi").click(function(){
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <button class="sembunyi">Sembunyikan Paragraf</button>
</body>
</html>

 Perhatikan bagian yang kami cetak tebal. Kami menambahkan CLASS pada button. Agar pada saat diklik button bisa bekerja, maka perlu menambahkan CLASS pada JQuery dengan simbol "." dan diikuti nama CLASSnya.

Untuk hasil akan sama saja seperti gambar 1 dan 2.

 4# Contoh Berdasarkan ATRIBUT

 
<html>
<head>
    <title>Latihan JQuery</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("[value='tombol']").click(function(){
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <button value="tombol">Sembunyikan Paragraf</button>
</body>
</html>

 Perhatikan bagian yang kami cetak tebal. Kami menambahkan ATRIBUT value="tombol" pada button. Agar pada saat diklik button bisa bekerja, maka perlu menambahkan ATRIBUT pada JQuery dengan simbol [value='tombol'].

Untuk hasil akan sama saja seperti gambar 1 dan 2.

 5# Contoh Berdasarkan TAG dan CLASS

 
<html>
<head>
    <title>Latihan JQuery</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button.tombol").click(function(){
                $("p.paragraf").hide();
            });
        });
    </script>
</head>
<body>
    <p class="paragraf">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <button class="tombol">Sembunyikan Paragraf</button>
</body>
</html>
Perhatikan bagian yang kami cetak tebal. Kami menambahkan CLASS pada setiap ELEMEN HTML yang menjadi sasaran. Agar pada saat diklik button bisa bekerja, maka perlu menambahkan TAG dan CLASS pada JQuery.

Untuk hasil akan sama saja seperti gambar 1 dan 2.

***

Kesimpulan:

  1. JQuery sangat powerfull digunakan sebagai penganti dari Javascript.
  2. Sintax JQuery lebih sederhana dibandingkan dengan Javascript.
  3. JQuery bisa diakses dengan berbagai macam maca yaitu lokal internal maupun eksternal
  4. JQuery dapat memodifikasi Elemen HTML baik berupa TAG, ID, CLASS maupun ATRIBUT.

Demikianlah materi pengenalan JQuery kali ini. Semoga bermanfaat.

Salam,


Saung IT

Related Posts

Saya Mau Beri Komentar

Comments

Subscribe to: Post Comments ( Atom )