Bagaimana Cara Kerja JQuery - Ngaji Coding

Breaking

Home Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

Minggu, 15 November 2015

Bagaimana Cara Kerja JQuery


Pengenalan JQuery Awal - Saya lanjutkan postingan saya tentang JQuery. Pada postingan sebelumnya kita telah mempelajari Apa itu JQuery ? Dan sekarang kita pelajari bagaimana JQuery ini bekerja. JQuery bisa kita praktikkan programnya setelah terlebih dahulu Anda mendownload library JQuery secara gratis via halaman utamanya. Pada halaman utamanya terdapat 2 opsi atau pilihan yang harus Anda pilih salah satu, antara PRODUCTION atau DEVELOPMENT.Yang mana diantara 2 opsi tersebut terdapat perbedaan. Apa perbedaanya? 

PRODUCTION : Ukuran file lebih  kecil daripada DEVELOPMENT dan agak susah dipahami bagi pemula.

DEVELOPMENT : Kode lebih mudah untuk dibaca, ini direkomendasikan buat orang orang yang suka memanipulasi fungsi - fungsi dari JQuery.

Bagaimana Cara Kerja JQuery


Belajar JQuey Tahap Dasar

Sebagai tahap awal pengenalan JQuery, Anda saya sarankan memilih yang production saja. Klik Link Download atau bisa juga klik disini. Setelah terdownload, maka akan tampil kumpulan script jquery-1.11.3.min.js [ tergantung versi JQuery yang digunakan, sampai tanggal saya buat postingan versi terbarunya 1.11.3. Kemudian copy paste kan saja ke editor teks dan biarkan saja namanya tersimpan secara default.
Lebih jelasnya ikuti langkah berikut :

1. Buat dokumen HTML baru seperti berikut

Bagaimana Cara Kerja JQuery

2. Kemudian Panggil libarary yang telah disimpan atau yang telah didownload, yaitu 1.11.3.min.js. Perhatikan kode pada bagian <script> baris ke-4

Bagaimana Cara Kerja JQuery

3. Di sini kita akan membuat dua buah bitton yang fungsinya untuk menampilkan dan menyembunyikan gambar. Siapkan gambar dan posisi harus satu folder dengan file koding ini.

Bagaimana Cara Kerja JQuery

4. Nah disini baru kita ketikkan script JQuery nyadan sesuaikan dengan ID yang tekah didefinisikan.  Perhatikan baris 6 - 16.

Bagaimana Cara Kerja JQuery

Nah untuk menjalankan Anda tinggal klik double pada index HTML tersebut. Dan jika berhasil maka akan tampil seperti ini :

Bagaimana Cara Kerja JQuery

Untuk penjelasan, bagaimana script ini bisa bekerja silahkan klik disini.

Ok, sementara itu dulu yang dapat saya bagikan. Terima kasih atas kunjunganya. Dan sampai jumpa pada postingan selanjutnya. Salam

Post Bottom Ad

Responsive Ads Here

Pages