header ilmugrafis
Home Tutorials Fonts IG Store Contact
 
ilmu grafis » jQUERY

Cara Menggunakan JQuery

Publish: 19 Maret 2013 | Author & Copyright: Johan | Status: FREE tutorial jQuery

Seperti pada tutorial sebelumnya yaitu Fungsi dari jQuery maka pada tutorial kali ini kita akan membahas Bagaimana cara menggunakan jQuery? wah mantab tuh gan, buruan dong! tenang, akan segera saya jelaskan langkah - langkahnya.

1. Ok pertama - tama adalah kita harus mendownload terlebih dahulu jQuery Library (inti dari jQuery). Dimana download jQuery Library? mau tau aja atau mau tau banget? hehehe... Downloadnya di www.jquery.com , silahkan klik Download jQuery. Saat penulisan tutorial ini library jQuery telah sampai versi 1.9.1
screenshot website jquery.com
gambar : screenshot website jquery.com


2. Pada halaman selanjutnya pilih versi jquery, ada versi Production dan versi Developer. Untuk saat ini pilih versi Production jQuery karena versi Developer ditujukan kepada para master pemrograman dan pengembang jquery.
pilihan download jQuery
gambar :

Catatan :
jQuery selalu merilis dua versi Library yaitu versi Production dan Development. Perbedaannya adalah versi Production ukuran filenya lebih kecil karena telah 'dimampatkan' atau istilahnya di Compress. Diperuntukkan bagi pengguna awam yang ingin langsung menggunakan jQuery. Sedangkan versi Development isi filenya mudah dibaca karena belum di Compress dan ditujukan unruk para Developer yang tertarik mempelajari - memanipulasi - bahkan mengembangkan fungsi - fungsi yang dimiliki oleh jQuery.

3. Akan muncul code dari library JQuery
jquery code library
gambar : jquery code library

Klik CTRL + S di keyboard untuk menyimpan kode tersebut ke direktori website anda
logo jquery write less do more
gambar : save jquery lib pada direktori website

4. Ok sekarang adalah kode untuk memanggil jQuery library supaya dapat terLOAD di website yang anda buat. Buka dreamweaver dan masukkan kodenya.
Scriptnya yang saya cetak tebal merah :
script pemanggil jQuery
gambar : script pemanggil jQuery

5. Ok sekarang cara Penggunaannya, inti dari jQuery adalah :
A) Panggil / Load library jQuery (stabilo merah)
B) buat script jquery di bagian head untuk mengontrol object berdasarkan elementnya (stabilo biru)
C) Buat Object beserta elemennya berupa id dan class di bagian body (stabilo abu - abu)


sebagai contoh saya akan membuat control sembunyikan dan tampilkan gambar :
inti dari jQuery
gambar : inti dari jQuery

6. ok sekarang kita lihat hasilnya KLIK DISINI
screenshot hasil
gambar : screenshot hasil

Download Source Latihannya
download now
Download Disini


Demikian cara download dan pemasangan hingga penggunaan jQuery. Sampai jumpa di tutorial jQuery berikutnya yaitu Overlay image. Terima kasih. Semoga Bermanfaat.

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
 

author

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai komputer grafis terutama program photoshop dan coreldraw. Saat ini bekerja sebagai designer grafis di salah satu perusahaan swasta di Surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Twitter: @johanfelisitas
Google+ :
Facebook : facebook.com/tomuramaster
Email : johan.felisitas[at]gmail[dot]com



Rekomendasi ilmugrafis

DREAMWEAVER WEBDESIGN
Desain Website Dreamweaver

CD Tutorial ini berisi tips dan trik desain website dengan Dreamweaver dan Photoshop...



[adv.] Supported by
dumetschool kursus desain grafis
DumetSchool.com

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Plugins

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Tools

FOTOGRAFI
Lightroom

VECTOR
Adobe Illustrator

ANIMASI
Flash
Swishmax

3D MODELING
3dsMAX
AutoCAD
Cinema 4D
Blender

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DESIGN
Dreamweaver
jQuery

PUBLISHING
InDesign
Ms. Paint

FREEWARE
Gimp
Inkscape

ARTS
News
Artikel
Gallery
Jasa Desain

FRIENDS
Photoshop Desain
Hog Pictures

Link to us


bantuan information

ilmugrafis launcher
Privacy policy

Channel Youtube
Arofat Media
Peta Situs | Term of Use web edukasi - ilmugrafis.com Indonesia
Copyright © 2017 ilmuGrafis. All Rights Reserved. | RSS | Subscribe
Hak Cipta Dilindungi Undang - Undang & Dmca
eXTReMe Tracker