Jquery merupakan kumpulan library kalau boleh dikatakan sebagai Javascript Framework. Dengan jquery membangun program berbasis web jadi lebih fleksibel terutama untuk Ajax dan meringankan beban server karena sifatnya yang client side. Mari kita coba tutorial berikut ini, tapi sebelumnya silakan download terlebih dahulu library jquerynya.
<html>
<head>
<script src="jquery.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function(){
$('#klik').click(function(){
$('#huruf').addClass('style1');
});
})
</script>
<style type="text/css">
.style1 {
font-family: Arial;
font-size:26px;
color:#FF0000;
font-weight:bold;
}
</style>
</head>
<body>
<span id="huruf">Hello jQuery</span><br>
<input id="klik" name="klik" size="20" type="button" value="Ganti warna" />
</body>
</html>
<head>
<script src="jquery.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function(){
$('#klik').click(function(){
$('#huruf').addClass('style1');
});
})
</script>
<style type="text/css">
.style1 {
font-family: Arial;
font-size:26px;
color:#FF0000;
font-weight:bold;
}
</style>
</head>
<body>
<span id="huruf">Hello jQuery</span><br>
<input id="klik" name="klik" size="20" type="button" value="Ganti warna" />
</body>
</html>
Pembahasan :
$(document).ready(function(){
$('#klik').click(function(){
$('#huruf').addClass('style1');
});
})
Simbol “$” adalah shortcut untuk memanggil jQuery
jQuery(document).ready(function(){
jQuery('#klik').click(function(){
jQuery('#huruf').addClass('style1');
});
})
atau bisa juga :Baris ke 4 pada kode diatas adalah sama dengan fungsi fungsinya untuk mendaftarkan event dan ini merupakan baris yang wajib.baris ke 5 ini untuk menambahkan event onclik pada button Ganti warna (baris 21) kalu kita lihat pada baris 24 kita tidak menambahkan onlick secara langsung namun sudah ditangani dengan kode pd baris ke 5. ‘#klik’ adalah ID dari button dan ‘#huruf” adalah id dari span Hello jQuery baris 20. Ingat jQuery memodifikasi berdasarkan nama class dan ID. sedangkan baris ke-6 merupakan isi action dari even onclick dan disini aksinya untuk menambahkan class css ke span id=”huruf”.
$(document).ready(function(){
$('#klik').click(function(){
$('#huruf').addClass('style1');
});
})
Simbol “$” adalah shortcut untuk memanggil jQuery
jQuery(document).ready(function(){
jQuery('#klik').click(function(){
jQuery('#huruf').addClass('style1');
});
})
atau bisa juga :Baris ke 4 pada kode diatas adalah sama dengan fungsi fungsinya untuk mendaftarkan event dan ini merupakan baris yang wajib.baris ke 5 ini untuk menambahkan event onclik pada button Ganti warna (baris 21) kalu kita lihat pada baris 24 kita tidak menambahkan onlick secara langsung namun sudah ditangani dengan kode pd baris ke 5. ‘#klik’ adalah ID dari button dan ‘#huruf” adalah id dari span Hello jQuery baris 20. Ingat jQuery memodifikasi berdasarkan nama class dan ID. sedangkan baris ke-6 merupakan isi action dari even onclick dan disini aksinya untuk menambahkan class css ke span id=”huruf”.
.JPG)
