Header Ads

Belajar jQuery Part 2 : Pengenalan jQuery

PENGENALAN JQUERY DASAR
Setelah sebelum kita mempelajari tentang Pengertian dan Cara menggunakan jQuery sekarang kita akan lanjut ke tahap selanjutnya . Selector dan Event pada jQuery untuk penjelasan mengenai Selctor dan Event 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 (#).  




PENGERITAN 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.


<!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></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>
 Penjelasan dan terpenting perhatikan

Dan yang terpenting pada contoh jQuery diatas .

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

 Syntax
$(document).ready(function() {
Digunakan jika halaman sudah siap diload 100% maka semua aksi jQuery siap untuk digunakan . Dan.

      $('#tombol').click(function() {
        $('.box').toggle();
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.

No comments

Powered by Blogger.