Scribd
Unggah
1 tayangan

Jquery

Diunggah oleh

Mas Aji
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
1 tayangan

Jquery

Diunggah oleh

Mas Aji
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

JQUERY TUTORIAL

JQUERY

jQuery adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga
mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya jQuery
menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “Write less, do more”.
Dirilis pertama kali pada tahun 2006 oleh john resig, jquery telah mencuri perhatian para developer
web. Pada tahun-tahun berikutnya jquery telah banyak digunakan oleh website-website terkemuka
di dunia seperti google, microsoft, intel , nokia, IBM, oracle, Twitter, Facebook, Youtube dan
masih banyak lagi

Mengapa memilih jQuery?

Ada beberapa alasan mengapa lebih baik menggunakan jQuery daripada library lainnya, antara
lain:

 Kompatibel dengan hampir seluruh browser


 jQuery telah digunakan oleh website-website raksasa
 Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)
 Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di http://jquery.com
 Didukung oleh banyak komunitas
 Disupport oleh plugin yang lengkap
 Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb
 Open source atau Free
 jQuery lebih diminati oleh para developer web saat ini

Apa kemampuan yang dimiliki jQuery?

Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita berdecak kagum:

- Mempermudah akses dan manipulasi elemen tertentu pada dokumen.


- Mempermudah modifikasi/perubahan tampilan halaman web.
- Mempersingkat Ajax (Asynchronous Javacsript and XML).
- Memiliki API (Application Programming Interface).
- Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.
- Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.

Penulisan Jquery

$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan semua
});

Copyright@LPK Metronics Medan 2016 By : Hery Prasetyawan


JQUERY TUTORIAL
Bagaimana Menggunakan Jquery ?

Cara mendapatkan Jquery dengan mendownload library jquery di http://jquery.com

Event
Event merupakan skrip yang akan mendeteksi sebuah aksi dari user, misalnya saja user menekan
mouse, memindahkan mouse dari suatu element ataupun sebagainya.

click() => Event ini sering banyak digunakan, fungsinya yaitu mendeteksi ketika salah satu elemen
diklik .

Contoh tampil.html

<html>
<head>
<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".sembunyi").click(function(){
$("#foto").hide("slow");
});

$(".tampil").click(function(){
$("#foto").show("normal");
});
});
</script>
</head>
<body>
<button class="sembunyi">Sembunyikan</button>
<button class="tampil">Tampilkan</button>
<p><img id="foto" src="wajah.jpg" /></p>
</body>
</html>

Efect SlideToggle
slideToggle() merupakan gabungan antara efek .slideDown() dan .slideUp(). Jadi, saat elemen
sedang muncul, maka .slideToggle() bertugas untuk menyembunyikannya, sedangkan saat elemen
sedang menghilang, maka .slideToggle() bertugas untuk menampilkannya.

Contoh slidetoggle.html

<html>
<head>

Copyright@LPK Metronics Medan 2016 By : Hery Prasetyawan


JQUERY TUTORIAL
<title>SlideToggle</title>
<style>
p{
width: 400px;
background-color: #f8f8f8;
padding: 10px;
}
</style>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<button>SlideToggle</button>
<p>Tegas akan diri sendiri, buang pikiran negatif dan lakukan yang baik. Kegelisahan hanya
milik mereka yang putus asa..</p>
<script>
$("button").click(function(){
$("p").slideToggle("slow");
});
</script>
</body>
</html>

Effect slideUp
.slideUp() digunakan untuk menyembunyikan objek dengan menciptakan efek sliding menutup.

Contoh click.html

<html>
<head>
<title>Click</title>
<style>
p{
cursor:pointer;
}
p:hover {
color:blue;
}
</style>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<p>paragraph pertama</p>
<p>paragraph kedua</p>
<script>
$("p").click(function(){
$(this).slideUp();

Copyright@LPK Metronics Medan 2016 By : Hery Prasetyawan


JQUERY TUTORIAL
});
</script>
</body>
</html>

Event focus
focus() => Mendeteksi ketika sebuah form sedang fokus .

Contoh focus.html

<html>
<head>
<title>Focus</title>
</head>
<style>
span {
display: none;
}
</style>
<script src="jquery-3.1.1.min.js"></script>
<body>
<p>Nama : <input type="text"><span>Ketikkan Nama</span></p>
<p>Email : <input type="email"><span>ketikkan email</span></p>
<script>
$("input").focus(function(){
$(this).next("span").css("display","inline").fadeOut(1500);
});
</script>
</body>
</html>

Event keyup
keyup() => Fungsinya adalah mendeteksi ketika tombol keyboard ditekan .

Contoh klonisasi_input.html
<html>
<head>
<title>Klonisasi Input</title>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#inputbox1").keyup(function(){

Copyright@LPK Metronics Medan 2016 By : Hery Prasetyawan


JQUERY TUTORIAL
var klonisasi = $(this).val();
$("#inputbox2").val(klonisasi);
});
});
</script>
</head>
<body>
<p>Alamat 1 : <input type="text" id="inputbox1"></p>
<p>Alamat 2 : <input type="text" id="inputbox2"></p>
</body>
</html>

JQuery Selector
jQuery Selector adalah sebuah cara yang disediakan jQuery untuk mencari element HTML. Tidak
hanya dengan atribut id saja, kita juga bisa menggunakan class, atribut lain, dan kombinasi
diantaranya.

Contoh ganti_background.html

<html>
<head>
<title>Mengganti Background dengan Jquery</title>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#back1").click(function(){
$("body").css("background","url(mybg1.jpg)");
});

$("#back2").click(function(){
$("body").css("background","url(mybg2.jpg)");
});

$("#back3").click(function(){
$("body").css("background","url(mybg3.jpg)");
});
});
</script>
</head>
<body>
<button id="back1">background 1</button>
<button id="back2">background 2</button>
<button id="back3">background 3</button>
</body>
</html>

Copyright@LPK Metronics Medan 2016 By : Hery Prasetyawan

Anda mungkin juga menyukai