Belajar Perintah Dasar JQuery

lebakcyber.net – Belajar perintah dasar JQuery. Oke jadi pada kesempatan kali ini kita akan membahas mengenai perintah dasar JQuery. Dan pada tutorial kali ini kita akan membahas mengenai selector dan juga event pada jquery, untuk lebih jelasnya mari kita bahas satu persatu mengenai event dan juga selector tersebut.

Event Pada JQuery

Event sendiri merupakan sebuah aksi atau method yang nantinya akan dilakukan JQuery, misalnya seperti menambahkan sebuah element, menampilkan element, menyembunyikan element, mengambil data pada attribut element dan lain sebagainya seperti yang juga bisa dilakukan oleh Javascript.

Selector Pada JQuery

Selector pada JQuery dapat dikatakan sebagai pemilih, arti pemilih disini adalah pemilihan terhadap element HTML yang nantinya akan mendapatkan atau diberikan method event atau aksi oleh JQuery.

Implementasi Event dan Selector Dengan JQuery

Sekarang silahkan teman-teman download file JQuery dengan cara seperti pada tutorial sebelumnya telah dibahas, lalu simpan file JQuery tersebut didalam satu folder dengan file index.html yang teman-teman buat, lalu buat juga sebuah file css dengan nama style.css selanjutnya masukan perintah seperti dibawah ini :

style.css

body {
       font-family: sans-serif;
}

h1 {
       text-align: center;
}

.kotak {
       height: 100px;
       width: 150px;
       background: blue;
}

#button {
       padding: 10px;
       color: #fff;
       background: black;
       border: none;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Jquery - lebakcyber.net</title>	
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>Belajar Perintah Dasar JQuery</h1>
<button id="button">Klik Saya</button>
<div class="kotak"></div>
</body>

<script type="text/javascript">
$(document).ready(function(){
    $('#button').click(function(){
        $('.kotak').toggle();
    });
});

</script>
</html>

Sekarang jalankan file index.html tersebut, nanti tampilannya akan seperti pada gambar dibawah ini :

Sekarang jalankan file index.html tersebut, nanti tampilannya akan seperti pada gambar dibawah ini :

Penjelasan

Pada perintah diatas kita sudah menambahkan element yang diberi tanda dengan class yang memiliki nama ‘kotak’ lalu selanjutnya kita membuat sebuah button atau tombol yang diberi id “button”.

Yang paling penting, silahkan perhatikan perintah jquery diatas, tepatnya pada perintah :

$(document).ready(function(){
    $('#button').click(function(){
        $('.kotak').toggle();
    });
});

Adapun perintah $(document).ready() digunakan untuk memberitahukan kalau jquery mulai akan dijalankan kalau halaman telah berhasil dimuat secara penuh, dengan kata lain JQuery

Sedangkan perintah yang digunakan untuk memberikan event atau aksi pada sebuah element yang memiliki id button pada saat di klik, kita menggunakan perintah :

$('#tombol').click(function(){
    $('.box').toggle();
});

Event click sendiri sebenarnya hanya salah satu dari banyak event yang bisa digunakan di JQuery dan pastinya akan kita pelajari pada tutorial belajar JQuery selanjutnya. Jadi jangan lupa untuk selalu berkunjung ke lebakcyber.net untuk mendapatkan tutorial belajar JQuery lainnya ya.

Lebak Cyber Kursus Pemrograman Gratis

Belajar Perintah Dasar JQuery