Mengenal jQuery, Efek jQuery, Keunggulan jQuery

Mungkin postingan tentang jQuery ini bisa dikatakan postingan yang sangat telat mengingat sudah banyak website atau blog yang membahasnya.. Yah, itu dikarenakan saya beberapa hari ini sangadh tertarik dan getol-getolnya mempelajari tentang jQuery ini. Pertanyaannya, apa sih istimewanya jQuery sampai-sampai di setiap lowongan-lowongan pekerjaan programmer akhir-akhir ini, diutamakan yang bisa jQuery..? Penyebabnya adalah karena hampir setiap website dewasa ini menggunakan jQuery untuk memperindah tampilan, membuat lebih interaktif, dan enak dilihat mata. jQuery juga bisa berjalan di semua browser saat ini.

Dari beberapa tutorial yang saya pelajari, banyak yang bisa dilakukan jQuery ini, seperti :

1. Kemudahan dan penyederhanaan dalam mengakses elemen-elemen halaman web
Contoh :
Misalkan kita ingin mengambil value dari sebuah textfield dengan id "email" atau htmlnya <input type="text" name="email" id="email">
Secara normal jika Javascrip ingin mengaksesnya skripnya adalah :
document.namaForm.email.value;   atau  document.getElementById('email').value;
namun jika dengan jQuery cukup dengan menggunakan :
$('#email').val();
Catatan : jika ingin mengakses berdasarkan IDnya gunakan (#), jika berdasarkan CLASSnya dengan tanda titik (.) (sebetulnya bukan dengan itu saja, namun yang sering saya pakai cara ini--hehe)

2. Kemudahan dalam manipulasi element HTML..
Contoh :
Jika dulu dengan Javascript biasa, jika ingin mengisikan sebuah <div> dengan teks, harus menggunakan fungsi seperti innerHTML kalau gak salah.. tapi dengan bantuan jQuery lebih bisa disederhanakan. Bahkan sebuah halaman .html lain bisa disisipkan dengan mudah dan singkat. Contoh, jika ingin mengisikan <div> dengan id="isi" dengan teks,  skripnya adalah sebagai beriku :
$('#isi').html('Isikan teks yang anda masukkan disini, gan');
atau jika ingin menyisipkan halaman html lain, caranya gini :
$('#isi').load('nama_file.html');
3. Kemampuan animasi (efek-efek) dalam menampilkan halaman web.
Banyak animasi-animasi yang disertakan dalam library jQuery ini, seperti :

  • show().  Digunakan untuk menampilkan sebuah elemen yang sebelumnya setting CSSnya adalah : display: none. 
  • hide(). Kebalikan dari show(), digunakan untuk menyembunyikan sebuah elemen.
  • toggle(). Gabungan dari show() dan hide() atau dengan kata lain 1 klik mempunyai dua fungsi, yaitu show dan hide, jika keadaan sedang hide() maka otomatis menjadi fungsi show(), begitu pula sebaliknya.
  • slideDown(). Digunakan untuk menampilkan elemen dengan efek sliding (meluncur)
  • slideUp(). Kebalikan slideDown(), digunakan untuk menyembunyikan elemen dengan efek sliding.
  • toggleSlide(), sama seperti toggle-nya show() hide(), tapi dengan efek sliding.
  • fadeIn(). Digunakan untuk menampikan elemen dengan efek memudar.
  • fadeOut(). Kebalikan fadeIn(), untuk menyembunyikan elemen dengan efek memudar. Perhatian : Efek fade tidak ada Togglenya.. (hehehe).
  • dan efek-efek lainnya yang belum saya coba.
4. Keunggulan lainnya akan dijelaskan kemudian jika saya sudah mengeksplornya lebih dalam.

Selanjunya yang paling ditunggu-tunggu adalah Demo dari kemampuan jQuery ini 

Mengisi elemen div dengan teks yang diinputkan 



Isi textfield akan ditampilkan disini...



Animasi show/hide, fadeIn/fadeOut, slideUp/slideDown









Comments

  1. Source codenya mana Gan ?? Butuh banget ni buat yg beginian.. Pliss..
    Tq be4

    ReplyDelete

Post a Comment

Popular posts from this blog

Download Aplikasi Ujian Online dengan Codeigniter, Ajax, JSON

Langkah-langkah install aplikasi ujian online berbasis web

Cara setting aplikasi ujian online di jaringan untuk banyak komputer client