Technology

Belajar jQuery dari Dasar

 

   

jQuery adalah sebuah framework yang menghubungkan interaksi antara Javascript dengan HTML. jQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Sesuai dengan slogan jQuery “Write less do more”, jQuery dalam perkembangannya mampu membuat penulisan coding jadi lebih ringkas, namun menghasilkan interaksi yang lebih halus dan memuaskan. Tampaknya inilah yang menjadikan banyak sekali developer web jatuh cinta padanya.

Apa saja yang bisa dilakukan jQuery?

1. Mengakses bagian halaman tertentu dengan mudah.

Tanpa adanya library Javascript khusus, user harus mengikuti aturan Document Object Model (DOM) untuk membuka bagian tertentu dari suatu halaman. Dengan kata lain, pengaksesan bagian tertentu sangat tergantung pada struktur HTML. Nah, jQuery membuat bagian yang ingin anda akses tersebut tidak perlu bergantung pada struktur HTML.

2. Menutup kompatibilitas antara browser dengan CSS.

CSS (Cascading Style Sheet) menawarkan metode yang cukup handal untuk mengatur dan mempercantik halaman web. Namun CSS kadang punya kelemahan yang cukup mengganggu. Yaitu beberapa perintah CSS tidak didukung oleh semua browser. Disini, jQuery menawarkan solusi untuk melingkupi kode CSS yang tidak kompatibel dengan browser.

3. Mengubah konten suatu halaman dengan lebih mudah.

Sebelum ada JQuery bagi saya rasanya cukup sulit jika kita ingin update sebagian isi dari sebuah halaman. Update disini berarti mengganti, menambahkan teks / gambar, mengurutkan daftar (list), menghapus baris tabel dan lain sebagainya. Dengan jQuery, semua tanggungan tersebut dapat dilakukan cukup dengan beberapa baris perintah.

4. Memudahkan interaksi user di dalam halaman.

Tampilan yang cantik masih belum cukup untuk membuat website yang “baik”. Website anda juga harus lebih interaktif. Misalnya user dapat berinteraksi dengan mengatur tampilan website sendiri. Di sini diperlukan pemrograman untuk menangani event-handling. Javascript memiliki beberapa event-handling, misalnya onclick untuk menangani event saat terjadi click. Namun sayangnya event-handling di Javascript terbatas pada object-object tertentu. Jenis-jenisnya pun terbatas. jQuery melengkapinya dengan tambahan penanganan event-handling yang semakin mudah.

5. Menambahkan animasi ke halaman.

Terus terang, saya dulu masih sering menggunakan Flash atau GIF untuk menimbulkan efek animasi. Keduanya memberatkan load website, sekaligus sekarang sudah bukan jamannya lagi. jQuery menawarkan konsep animasi (meskipun sekarang masih sederhana) yang cukup apik namun ramah bandwidth. Misalnya animasi fading untuk membuat suatu bagian dari halaman menghilang.

6. Pindah halaman tanpa perlu refresh.

Mungkin kita pernah membuka suatu website yang tidak perlu refresh ketika kita pindah halaman. Konsep tersebut adalah dasar dari AJAX (Asynchronous Javascript and XML). Pada penerapannya, cukup sulit jika kita harus membangun website dari awal dengan konsep AJAX, apalagi jika website anda sudah jadi. Di sinilah anda dapat memanfaatkan sistem jQuery.

Di bawah ini ada beberapa contoh script yang dapat anda gunakan untuk belajar jQuery dari awal. Selanjutnya bisa anda kembangkan sendiri.

1. find()

Anda bisa gunakan fungsi ini untuk mengambil / menemukan sebuah tag html dalam suatu halaman. Dalam penerapannya biasa digabungkan dengan fungsi lain seperti css(), addClass(), removeClass(), dll.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
  $("p").find("span").css('color','red');
</script>

</body>
</html>

Demo

2. addClass()

Fungsi ini biasa digunakan untuk menambahkan class CSS pada tag HTML.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 8px; font-size:16px; }
  .selected { color:blue; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>

<script>
  $("p").last().addClass("selected");
  </script>

</body>
</html>

Demo

3. removeClass()

Fungsi ini merupakan kebalikan dari addClass. Di mana kita gunakan untuk menghapus class dari suatu tag HTML.

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 4px; font-size:16px; font-weight:bolder; }
  .blue { color:blue; }
  .under { text-decoration:underline; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class="blue under">Hello</p>
  <p class="blue under highlight">and</p>
  <p class="blue under">then</p>

  <p class="blue under">Goodbye</p>
<script>$("p:even").removeClass("blue");</script>

</body>
</html>

Demo

4. toggleClass()

Fungsi ini digunakan untuk menambah atau menghapus class pada objek tertentu. Contoh di bawah ini jika kita gabungkan dengan fungsi click() . Sehingga saat pertama kali diklik, tag <p> akan diberi class highlight. Kemudian saat di klik lagi, class highlight akan di hapus.

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 4px; font-size:16px; font-weight:bolder;
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>
<script>
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });
</script>

</body>
</html>

Demo

5. html()

Fungsi ini digunakan untuk menambahkan isi dari tag HTML yang diinginkan.

<!DOCTYPE html>
<html>
<head>
  <style>
  .red { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>Hello</span>
  <div></div>
  <div></div>
  <div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>

</body>
</html>

Demo

6. val()

Val() berfungsi untuk mendapatkan nilai / isi dari tag HTML secara dinamis.

<!DOCTYPE html>
<html>
<head>
  <style>
  button { margin:4px; cursor:pointer; }
  input { margin:4px; color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <button>Feed</button>
    <button>the</button>
    <button>Input</button>
  </div>
  <input type="text" value="click a button" />
<script>
    $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });
</script>

</body>
</html>

Demo

7. show()

Fungsinya untuk menampilkan element yang kita inginkan. Biasanya sebelum di tampilkan, defaultnya  tag HTML kita sembunyikan dengan memberi fungsi CSS “display:none”.

<!DOCTYPE html>
<html>
<head>
  <style>
p { background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Show it</button>
      <p style="display: none">Hello  2</p>
<script>
$("button").click(function () {
  $("p").show("slow");
});
</script>

</body>
</html>

Demo

Demikian beberapa script basic jQuery. Semoga bermanfaat ;-)


Artikel Terkait

8 komentar

  • 9 March 2013 - pukul 21:12

    nah, ini yang tak cari.

    jquery sma ajax susah mana ya?

    • 11 March 2013 - pukul 5:25

      jQuery sama ajax disini yang saya tangkap tidak bisa dibandingkan mas Andika. Karena keduanya beda tipe, jQuery adalah library atau helper, sedangkan AJAX adalah fitur yang ada pada Javascript. Namun untuk pembelajarannya keduanya sangat mudah kok mas.

  • 28 March 2013 - pukul 14:41

    mau tanya dunk… kalo untuk menambahkan baris bagaimana yach script nya…
    saya mau membuat program penjualan… khan ada nama barang, harga, jumlah, total harga… jika membeli beberapa barang.. tentu perlu baris tambahan.. sesuai dengan barang yang di beli…
    terimakasih sebelumnya.. mohon maaf merepotkan..

  • 4 April 2013 - pukul 9:41

    ada yang bisa kasih tutor lengkap versi PDF gk ? heheee
    tapi dari dasar dan awal .. soalnya saya masih baru belajar
    thaks

  • 21 October 2013 - pukul 19:46

    google juga mengguna dan menghosnya…tiada alasan tidak menggunakannya

  • Dimas
    3 January 2014 - pukul 12:35

    Maaf , saya mau tanya nih
    Gimana cara menggunakan jQuery ajax di template seperti http://themes.creativemilk.net/files/elite/index.html
    Saya sudah coba mengikuti tutorial diatas , tetapi tidak bisa
    Mohon bantuannya
    Makasih

    • 8 January 2014 - pukul 9:59

      Halo mas Dimas,

      yang dimaksud pada referensi itu pada tab “ajax with refresh” itu ya? untuk tutorial diatas merupakan tutorial yang sangat dasar mengenai jQuery. Untuk pengembangan seperti AJAX, terlebih dahulu mas membaca link berikut ini http://api.jquery.com/Ajax_Events/ . Jika masih ada yang ditanyakan, silahkan leave comment saja.

      Terima kasih :)

  • 8 May 2014 - pukul 10:08

    Makasih atas informasinya gan, cukup lengkap sekali.
    Jquery memang cukup bermanfaat, dalam membangun sebuah aplikasi web.
    Maju terus jquery..

    Salam

Berikan Komentar

Your email address will not be published. Required fields are marked *