Kenalan Sama jQuery yuk

Adalah seorang tokoh bernama John Resig yang telah merilis sebuah Javascript Library dan kini kita kenal dengan nama jQuery. Semenjak dirilis pertama kali pada tahun 2006, jQuery telah mencuri perhatian para developer web. Buktinya, pada tahun-tahun berikutnya jQuery telah banyak digunakan oleh website-website terkemuka didunia seperti Google, Microsoft, Intel dan masih banyak lagi.

Apa itu jQuery ?

jQuery adalah Javascript Library -> kumbpulan kode atau fungsi javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript. Secara standar, jika kita membuat kode Javascript, maka diperlukan kode yang cukup panjang. Nah disinilah fungsi jQuery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi yang terdapat didalam Library tersebut.

Kesimpulannya, jQuery menyederhanakan kode javascript. Ini sesuai dengan slogannya 'Write less, do more'.

Bagaimana Menggunakan jQuery?

Karena jQuery merupakan sebuah Library, maka tentunya kita harus memiliki jQuerynya terlebih dahulu. Download library jQuery di http://jquery.com. Setelah itu simpan pada direktori percobaan jQuery ( Terserah dimana misalnya D:/jquery/ ).

Sebagai contoh, kita akan membuat dua buah tombol yang akan mengontrol sebuah foto :

Lihat Source Code

<html>    <head>      <title>jquery : write less do more</title>      <script type="text/javascript" src="jquery-1.4.min.js"><!-- Memanggil Library jQuery --!>      </script>      <script type="text/javascript">        $(document).ready(function(){            $(".hide_photo").click(function(){               $("#foto").hide("slow");            });              $(".show_photo").click(function(){               $("#foto").show("slow");            });        });       </script>    </head>    <body>      <button class="hide_photo">Hide The Photo</button>      <button class="show_photo">Show The Photo</button>      <p><img id="foto" src="black_guitar.jpg" style="border:7px solid; padding:5px;"/></p>    </body>  </html>

<html>
<head>
<title>jquery : write less do more</title>
<script type="text/javascript" src="jquery-1.4.min.js"><!-- Memanggil Library jQuery --!>
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".hide_photo").click(function(){
$("#foto").hide("slow");
});
$(".show_photo").click(function(){
$("#foto").show("slow");
});
});
</script>
</head>
<body>
<button class="hide_photo">Hide The Photo</button>
<button class="show_photo">Show The Photo</button>
<p><img id="foto" src="black_guitar.jpg" style="border:7px solid; padding:5px;"/></p>
</body>
</html>

Simpan filenya, misalnya dengan nama index.html Lalu coba buka dengan browser. Maka hasilnya adalah seperti dibawah ini :

Pada saat pertama kali dibuka maka akan tampil seperti ini :

Pada Saat Tombol "Hide The Photo" diklik maka foto gitar tersebut akan menghilang disertai dengan animasi menghilang yang sangat menarik

Dan jika tombol "Show The Photo" diklik, maka foto gitar tersebut akan kembali muncul.

Lihat, dengan jQuery untuk menghilangkan suatu objek tertentu hanya diperlukan beberapa baris kode, bayangkan jika harus mengetik kode dari awal lagi mungkin bisa berpuluh - puluh baris kode yang diperlukan. Karena itulah jQuery sangat cocok dengan slogan Write less do more.

Efek hide dan show seperti pada contoh diatas merupakan contoh efek jquery yang sangat sederhana. Masih banyak efek-efek lain yang dapat kita buat dengan jQuery.

Memahami jQuery

Pada umumnya, perintah jQuery disimbolkan dengan tanda dolar ($). Perhatikan gambar berikut :

Intinya, fungsi jQuery akan mencari suatu elemen tertentu yang telah didefinisikan pada bagian body, kemudian akan melakukan sesuatu terhadap elemen tersebut.

Pada contoh diatas :

$(document).ready(function()
jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua dihalaman web.

$(".hide_photo")
$(".show_photo")
$("#foto")

Setelah semua Elemen ditampilkan, kemudian jQuery akan memilih elemen berdasarkan id, class atau tag. Atau lebih dikenal dengan selector.

Setelah elemen dipilih, berikutnya adalah memberikan aksi/operasi terhadap elemen yang sudah dipilih. Misalnya hide, show dll.

$(".hide_photo").click(function(){
$("#foto").hide("slow");
});

Demikianlah beberapa kalimat sederhana yang merupakan trik dasar untuk memahami jQuery. Setelah memahami trik dasar tersebut, kita hanya tinggal mengeksplorasi fungsi - fungsi jQuery yang kita butuhkan untuk memperindah website kita.

Plugins jQuery yang dapat dikolaborasikan pada website

Animasi SlideShow Headline berita.

Tentunya animasi slideshow ini sering kita lihat pada website - website yang kita kunjungi. tidak perlu jauh-jauh, kampus online unikom juga menggunakan Animasi SlideShow Ini.

Banyak plugin jquery bisa kita gunakan untuk animasi slideshow ini. Bahkan ada yang dari Indonesia, yaitu headline.js yang dibuat oleh Chandra Jatnika. Plugin ini dapt didownload di situs http://chandrajatnika.com.

Tooltip yang menawan

Bagi yang sering berenang di internet tentu pernah bersentuhan dengan tooltip. Misalnya pada saat kita arahkan mouse keatas suatu link atau gambar, maka akan tampil info atau keterangan mengenai link atau gambar tersebut.

Menu Dropdown yang Sexy

Menu dropdown merupakan teknik yang cukup populer sekarang ini, dan banyak juga penyedia plugins yang mau memberikan scriptnya untuk kita.

Plugins menu dropdown dapat didownload di situs http://apycom.com/menus/4-red.html

Validasi yang responsif

Fungsi utama validasi adalah memastikan bahwa data-data yang diisi user pada suatu form sudah benar. Misalnya umur hanya boleh diisi dengan angka atau email harus dipastikan format email (misalnya riza.alfajri90@gmail.com) yang mengharuskan ada simbol @ dan titik.

Sumber : http://10507419.blog.unikom.ac.id/kenalan-sama-jquery.1g9

Kenalan Sama jQuery yuk

Apa itu jQuery ?

Bagaimana Menggunakan jQuery?

Memahami jQuery