Setelah sebelumnya saya menjelaskan mengenai pengertian siangkat Jquery dan cara penggunaannya di chapter ini saya akan mencoba berbagi lagi mengenai Event yang ada pada javascript yang saya ketahui. diantaranya adalah sebagai berikut :
1. keypress()
Merupakan Event pemicu untuk mengikat fungsi dari perintah tombol dari element yang dipilih.
$( selector ).keypress() //memicu keypress untuk pemilihan item
$( selector ).keypress( function ) // Optional. Menjalankan fungsi yang spesifik ketika ada pemicu berupa penekanan tombol keyboard.
Dari sekian tombol yang ada pada keyboard,akan memiliki devinisi kode yang berbeda-beda.
$(document).keypress(function(){
if(keyCode==27){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
}
});
Contoh : Perintah ketika kita memberian fungsi ketika ada pemicu pada penekanan kode 27 = Esc.
2. Click()
Digunakan untuk memicu event pada element HTML saat user mengklik elemen yang mempunyai fungsi click() ini. Event click dikirim ke elemen saat pointer mouse diatas elemen dan tombol mouse ditekan lalu dilepaskan.
<script type=”text/javascript”>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>
$(“p”).click() kode ini berarti bahwa JQuery mencari tag
HTML dan menunggu diklik oleh user. $(this).hide() kode ini berarti bahwa isi dari paragraph dihide.
3. fadeIn()
Digunakan untuk menampilkan elemen dengan efek pudar.
$(‘selector’).fadeIn(‘durasi’,’callback’)
Keterangan: Selector digunakan untuk memilih elemen yang akan dikenakan efek fadeIn. ‘durasi’ adalah waktu yang menunjukkan berapa lama efek fade ini akan berlangsung.
<script>
$(document).ready(function(){
$(“p”).hide();
$(“.tekan”).click(function(){
$(“p”).fadeIn();
});
});
</script>
4. Css();
jQuery juga mempunyai kemampuan dalam hal memanipulasi CSS. Ada 3 fungsi utama dalam jQuery untuk melakukan manipulasi.
$(selector).css(name,value)
$(selector).css({properties})
$(selector).css(name)
Fungsi css() berguna untuk mendapatkan atau set sebuah properti CSS atau lebih untuk elemen yang dipilih. Jika parameter name dan value diisi, artinya kita me-set nilai dari properti CSS. Untuk me-set nilai-nilai untuk properti CSS lebih dari satu, bisa gunakan {properties}. Jika hanya untuk mendapat nilai dari properti CSS yang diinginkan dari elemen yang dipilih cukup isi parameter name saja.
<script type=”text/javascript”>
$(document).ready(function(){
$("#tombol1").click(function(){
$(".p1").css("color","red");
$(".p2").css({"color":"white","backgroundcolor":"#
ff8954","font-family":"Arial","fontsize":"
20px","padding":"5px"});
});
$("#tombol2").click(function(){
var nilai = $(".p1").css("color");
alert(nilai);
});
});
<script>