Aam aminah_1202741_Tik_2012

JQUERY
HELLO WORLD
AAM AMINAH
1202741
TEKNOLOGI PENDIDIKAN (KONSENTRASI GURU TIK)
UNIVERSITAS PENDIDIKAN INDONESIA

JQUERY (WRITE LESS, DO MORE !!)
• Jquery adalah javascript library yang dibangun untuk mempercepat dan memperingakas , menangani
HTML, menangani event, serta manipulasi dokumen HTML, membuat animasi dan interaksi ajax untuk
mempercepat pengembangan web. Bisa disebut juga Jquery merupakan framework (library) javascript
yang dirancang untuk memperingkas kode-kode javascript.

KEMAMPUAN YANG DIMILIKI JQUERY
• Kemudahan mengakses elemen-elemen HTML
• Memanipulasi elemen HTML
• Memanipulasi CSS
• Penanganan event HTML
• Efek-efek javascript dan animasi
• Modifikasi HTML DOM
• AJAX
• Menyederhanakan kode javascript lainnya

SINTAQ DASAR JQUERY
<head>
<script type=“text/javascript”scr=“../jquery-1.8.2.min.js”>
</script>
<script type=“text/javascript”>
$(document).ready
(
function()
{
}
);
</script>
</head>

CONTOH PENERAPAN JQUERY
• $ : tanda untuk mendefiniskan jQuery
• (this/selector) : kode di dalamnya adalah selector yang menunjukkan elemen yang dipilih atau dituju.
• action (): adalah action dari JQuery untuk diterapkan pada elemen. Contoh: .hide, .show, dll.
Secara umum sintaq Jquery ditulis: $(selector).action()

EFEK-EFEK JQUERY
No. Jquery Keterangan Sintaq
1. Jquery Show()efect Menampilkan elemen
yang tersembunyi
$ (selector) . (speed, callback)
2. Jquery hide()effect Menyembunyikan elemen
yang dipilih
$(selector).hide(speed,callback)
3. Jquery toggle()effect Gabungan fungsi hide dan
show.
$
(selector).toggle(speed,callback,s
witch).
4. Jquery slideDown()Effect Menampilkan elemen
tersembunyi, secara efek
sliding.
$(selector).slideDown(speed,call
back).
5. Jquery slideUp()effect Menyembunyikan elemen
dengan efek sliding
$(selector).slideUp(speed,callbac
k).
6. Jquery slideToggle()effect Gabungan antara
slideDown dengan
slideUp.
$(selector).slideToggle(speed,call
back).
7. Dll ..

JQUERY HELLO WORLD
Untuk membuat program Hello World, langkah yang harus dipersiapkan ialah:
1. Mempersiapkan Tools yang akan digunakan untuk memulai jquery hello world
• Text editor, dapat menggunakan notepad, notepad++, dll.
• Web browser, dapat menggunakan firefox, chrome, dll.
• Web server, dapat menggunakan apache, IIS, dll
• Jquery library, dapat di download di alamat http://docs.jquery.com/Downloading_jQuery.
2. Ketikkan kode yang akan di masukkan pada text editor (notepad++).
3. Setelah memasukkan kode tersebut save dengan extension.html, kemudian jalankan di web browser.

TAMPILAN INDEX.HTML
N
o
t
e
p
a
d
+
+

PENJELASAN
• <script type="text/javascript" src="jquery-1.4.2.js"></script> -> menautkan library Jquerynya
• <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> -> menautkan library
Jquerynya.
• $(document).ready(function(){ }); -> fungsi Jquery yang memeriksa apakah halaman sudah dimuat
dengan sempurna.
• $("#flip").click(function(){ memasukkan perintah jquery dengan fungsi klik dan
$("#panel").slideToggle("slow"); memunculkan tampilan dengan basis slideToggle,
• var div=$("div"); penggabungan antara efek slideUp & slideDown.
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow"); tambahan dengan menampilkan animasi
div.animate({height:'100px',opacity:'0.4'},"slow"); Jquery dengan menggunakan div.animate.
div.animate({width:'100px',opacity:'0.8'},"slow");

TAMPILAN PADA MOZILA FIREFOX
TERIMA KASIH

Aam aminah_1202741_Tik_2012

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (13)

Aam aminah_1202741_Tik_2012