JQuery Part 2 : Pengenalan JQuery Dasar
PENGENALAN JQUERY DASAR
Setelah sebelumnya kita mempelajari tentang Pengertian dan Cara menggunakan JQuery sekarang kita akan lanjut ke tahap berikutnya. Sebelum melangkah lebih jauh alangkah baiknya kita mengetahui apa itu Selector dan Event pada JQuery untuk penjelasan mengenai Selctor dan Event JQuery akan dijelaskan pada tutorial dibawah ini.
PENGERTIAN SELECTOR JQUERY
Selector dapat dikatakan sebagai pemilih. Dalam artian kata pemilih ini adalah memilih element HTML mana yang akan diberikan method event atau aksi JQuery. Seperti yang sudah kita pelajari sebelumnya tentang Selector pada HTML yaitu class dan id. Dimana class dipanggil dengan cara memberikan tanda titik (.) dan id dipanggil dengan memberikan tanda pagar (#).
PENGERTIAN EVENT JQUERY
Event merupakan method atau aksi yang dilakukan JQuery. Contohnya seperti menambah element, menyembunyika element, mengambil data pada atribut element dan lainya seperti yang sudah kita pelajari pada tutorial Javascript sebelumnya di blog Script Kiddies. Event ditetapkan setelah pada saat setelah menetapkan selector yang ingin kita berikan method atau aksi JQuery.
CONTOH EVENT DAN SELECTOR JQUERY
Disini saya memberikan contoh tentang penggunaan dasar event pada jquery. Disini saya membuat sebuah file HTML yang saya berikan nama index.html dan file CSS yang saya beri nama style.css dan jangan lupa sediakan library JQuery yang sebelumnya sudah saya jelaskan pada tutorial Pengertian Dan Cara Menggunakan JQuery.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Pengenalan jQuery Dasar</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> Tutorial jQuery Dasar <br>
www.script-kiddies.org</h1>
<button id="tombol">TOMBOL</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#tombol').click(function() {
$('.box').toggle();
});
});
</script>
</body>
</html>style.css
body{
font-family: raleway
}
h1{
text-align: center;
}
.box{
width: 500px;
height: 300px;
background-color: hotpink;
}
#tombol{
padding: 10px;
color: #000;
background: transparent;
border: 1px solid black;
}Dapat diperhatikan pada contoh diatas saya membuat sebuah element yang saya beri tanda dengan class yaitu .box dan membuat tombol yang saya beri tanda id #tombol.
Dan yang terpenting perhatikan pada contoh JQuery diatas.
$(document).ready(function() {syntax
$('#tombol').click(function() {
$('.box').toggle();
$(document).readyDigunakan untuk memberitahukan bahwa jika halaman sudah siap diload 100% maka semua aksi JQuery siap untuk digunakan. Dan pada
$('#tombol').click(function() {syntax diatas memerintahkan untuk memberikan aksi atau event untuk element yang ber id (#tombol) diklik. Untuk lebih jelasnya selector adalah id yang dipanggil dengan id (#tombol) dan class box yang dipanggil dengan (.box). toggle() adalah sebuah function yang berfungsi untuk menampilkan dan menembunyikan element sesuai yang telah kita tetapkan tadi yaitu class box.
$('.box').toggle();
KESIMPULAN
Kita sudah belajar mengenai event dan selector pada JQuery yang intinya event adalah sebuah efek / aksi yang dilakukan oleh JQuery dan selector adalah element html mana yang akan kita berikan event. Ya.. kurang lebihnya seperti itu jika sobat masih bingung silahkan berikan komentar, Sekian Terima Kasih
Tidak ada komentar :
Posting Komentar