dasar jquery! hello world

Apa itu JQuery?

jQuery dirilis pada tahun 2006, diciptakan oleh John Resig dan di publikasikan pada

blog pribadinya http://ejohn.org/blog/selectorsin-javascript. jQuery merupakan

Javascript Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga

mempermudah kita untuk membuat kode Javascript. Atau dalam

kesimpulannya atau kumpulan kode-kode javascript, jQuery menyederhanakan

kode Javascript slogannya “write less, do more”. jQuery dapat berinteraksi dengan

CSS, dan menghasilkan animasi yang sangat menarik.

Mengapa memilih jQuery?

Ada beberapa alasan mengapa kita menggunakan jQuery daripada library

lainnya, diantaranya:

Kompatibel dengan hampir seluruh browser

Kompatibel dengan seluruh versi CSS

Disupport oleh plugin yang lengkap

http://ejohn.org/blog/selectorsin-javascript

Berukuran kecil

Open source

Akses yang cepat

Handal dan digunakan oleh web-web raksasa dunia

Bagaimana JQuery Bekerja?

Cara kerja jQuery dapat dijelaskan sebagai berikut

1. jQuery akan memastikan setiap elemen yang kita buat dimunculkan di

halaman web, berikut fungsi yang digunakan:

2. Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen

berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jQuery

menggunakan fungsi Selector, fungsinya mirip dengan CSS.

3. Setelah elemen dipilih, langkah selanjutnya adalah memberikan aksi atau

operasi terhadap elemen yang kita pilih tadi. Sebagai contoh kita akan

memunculkan gambar secara perlahan.

$("#clickMe").click(function() {

$("img").fadeIn(1000);

$("#picframe").slideToggle("slow");

Menulis Hello World! jQuery

Untukmembuat kode jQuery kita membutuhkan sebuah teks editor, browser, dan

jQuery Library.

Teks editor yang bisa kita gunakan misalnya: PSPad, TextPad, atau Edit Plus, tapi

kita juga bisa menggunakan notepad untuk menulis kode-kode jQuery.

Yang tidak kalah penting adalah kita membutuhkan jQuery Library, lalu bagaimana

kita mendapatkannya? Akan saya jelaskan setelah ini.

Mendownload JQuery

Buka terlebih dahulu browser favoritmu dan buka www.jquery.com

Cari petunjuk “GRAB THE LATEST VERSION!” kemudian pilih” PRODUCTION” dan klik

download.

http://www.jquery.com/

Setelah itu Anda pasti akan menemukan

halaman seperti ini .

Simpan kode tersebut dalam sebuah folder,

misalnya ”script”

Program Pertama Kita

Setelah kita download JQuery maka kita akan mulai membuat sebuah program

sederhana

<html>

<head>

<title>Head First Lounge</title>

<script src="jquery.js"></script>

<script src="app.js"></script>

</head>

<body>

<div id="tugel"><h1>Hello World!</h1></div>

<div id="box"><p>

<img src="images/drinks.gif">

</p></div>

<p>

Hello World! Ini Program Pertama Saya dengan

<a href="www.jquery.com">jQuery</a> :D

</p>

</body>

</html>

Kode diatas hanyalah kode-kode HTML biasa, perhatikan pada dua tag <script>:

<script src="jquery.js"></script>

<script src="app.js"></script>

Pertama, kita memunculkan jquery.js kemudian kita munculkan app.js, yang masih

belum kita isi sebelumnya. App.js akan kita gunakan sebagai tempat meletakkan

script yang akan menjalankan animasi.

Simpan file diatas dengan nama lounge.html

Kemudian kita akan buat app.js

Ketikkan tulisan dibawah dan simpan dengan nama app.js

$(document).ready(function() {

$("#tugel").animate({ "height" : 100 }, 1000) // animasi membuat kotak dengan

.fadeOut(1000) // animsi menghilang perlahan

.show(500) // animasi muncul perlahan

.animate({ "width" : 100 }, 1000) //animasi

.css("background", "red");

});

Hasilnya:

dasar jquery! hello world

Documents