Dasar JQuery! Hello world

Hello World!
Dengan JQuery
Achmad Ali Akbar 1202417
Universitas Pendidikan Indonesia Fakultas Ilmu Pendidikan Jurusan Teknologi Pendidikan

ApaituJQuery?
jQuerydirilispadatahun 2006,diciptakanoleh John Resigdan di publikasikanpada blog
pribadinyahttp://ejohn.org/blog/selectorsin-javascript. jQuerymerupakanJavascript
Library ataukumpulankode/fungsiJavascriptsiappakai,
sehinggamempermudahkitauntukmembuatkodeJavascript.
Ataudalamkesimpulannyaataukumpulankode-kodejavascript,
jQuerymenyederhanakankodeJavascriptslogannya “write less, do more”.
jQuerydapatberinteraksidengan CSS, danmenghasilkananimasi yang sangatmenarik.
MengapamemilihjQuery?
Ada beberapaalasanmengapakitamenggunakanjQuerydaripada library lainnya,
diantaranya:
 Kompatibeldenganhampirseluruh browser
 Kompatibeldenganseluruhversi CSS
 Disupportoleh plugin yang lengkap

 Berukurankecil
 Open source
 Akses yang cepat
 Handaldandigunakanoleh web-web raksasadunia
BagaimanaJQueryBekerja?
Cara kerjajQuerydapatdijelaskansebagaiberikut
1. jQueryakanmemastikansetiapelemen yang kitabuatdimunculkan di halaman
web, berikutfungsi yang digunakan:
2. Setelahsemuaelemenditampilkan,
tahapberikutnyaadalahmemilihelemenberdasarkan class atau id yang

telahdidefinisikan. Dalamhalini, jQuerymenggunakanfungsi Selector,
fungsinyamiripdengan CSS.
3. Setelahelemendipilih,
langkahselanjutnyaadalahmemberikanaksiatauoperasiterhadapelemen yang
kitapilihtadi. Sebagaicontohkitaakanmemunculkangambarsecaraperlahan.
$("#clickMe").click(function() {
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");

Menulis Hello World! jQuery
UntukmembuatkodejQuerykitamembutuhkansebuahteks editor, browser, danjQuery
Library.
Teks editor yang bisakitagunakanmisalnya: PSPad, TextPad, atau Edit Plus,
tapikitajugabisamenggunakan notepad untukmenuliskode-kodejQuery.
Yang tidakkalahpentingadalahkitamembutuhkanjQuery Library,
lalubagaimanakitamendapatkannya?Akan sayajelaskansetelahini.
MendownloadJQuery
Bukaterlebihdahulu browser favoritmudanbukawww.jquery.com
Caripetunjuk “GRAB THE LATEST VERSION!” kemudianpilih” PRODUCTION” danklik
download.

SetelahituAndapastiakanmenemukanhalamansepertiini .
Simpankodetersebutdalamsebuah folder, misalnya ”script”

Program Pertama Kita
Setelahkita download JQuerymakakitaakanmulaimembuatsebuah 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>
<imgsrc="images/drinks.gif">
</p></div>

<p>
Hello World! Ini Program PertamaSayadengan
<ahref="www.jquery.com">jQuery</a> :D
</p>
</body>
</html>
Kodediatashanyalahkode-kode HTML biasa, perhatikanpadadua tag <script>:
<script src="jquery.js"></script>
<script src="app.js"></script>
Pertama, kitamemunculkan jquery.js kemudiankitamunculkan app.js, yang
masihbelumkitaisisebelumnya. App.js akankitagunakansebagaitempatmeletakkan
script yang akanmenjalankananimasi.

Simpan file diatasdengannama lounge.html
Kemudiankitaakanbuat app.js
Ketikkantulisandibawahdansimpandengannama app.js
$(document).ready(function() {
$("#tugel").animate({ "height" : 100 }, 1000) // animasimembuatkotakdengan
.fadeOut(1000) // animsimenghilangperlahan
.show(500) // animasimunculperlahan
.animate({ "width" : 100 }, 1000) //animasi
.css("background", "red");
});
Hasilnya:

Dasar JQuery! Hello world

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Dasar JQuery! Hello world

Similar to Dasar JQuery! Hello world (20)

Dasar JQuery! Hello world