- <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.
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
Adalah seorang tokoh bernama John Resig yang telah merilis sebuah Javascript Library dan kini kita kenal dengan nama jQuery. Semenjak diri...
CARA MEMPERCEPAT KONEKSI INTERNET DENGAN SOFTWARE INTERNET TURBO
Membangun Jaringan Lokal (LAN) Berbasis Windows
Menghubungkan 2 (Dua) Komputer Dengan Kabel LAN (UTP)
