Contoh Penggunaan Events Pada JQuery

Selamat Malam,

Kita lanjut lagi yuk belajarnya tentang JQuery, kali ini kita sudah sampai pada level contoh penggunaan Events pada JQuery.  Ini tidak sulit kog hampir mirip dengan JavaScript mengingat JQuery adalah library dari JavaScript.

Okey langsung saja, saya kasih sedikit contoh Penggunan Events pada JQuery.

Event yang sering digunakan.

Untuk script code JQuerynya seperti ini :
Nb : kalian harus menyesuaikan selector yang kamu gunakan dengan elemet HTMlnya.

<script>
$(document).ready(function() {
    $('.p1').click(function() {
        alert('Anda telah meng-klik kalimat ini,')
    });
   
    $('.p2').dblclick(function(){
        alert('Anda telah klik doble pada text ini.')
    });
   
    $('.p3').mouseenter(function(){
        $(this).css('background-color','#ddd');
    });
   
    $('.p4').mouseleave(function(){
        $(this).css('background-color','#ddd');
    });
   
    $('.p5').hover(function(){
        $(this).css('background-color','#ddd');
    },
    function(){
        $(this).css('background-color','#999');
    });
});

$(document).ready(function() {
    $("input").focus(function(){
        $(this).css('background-color','#ccc');
    });
    $("input").blur(function(){
        $(this).css('background-color','#fff');
    });
    $("input").keydown(function(){
        var isi = $(this).val();
        var counter = isi.length;
        document.getElementById('count').innerHTML = counter;
    });
});
</script>

Untuk code HTML seperti ini yang saya gunakan :

1. Event Click

<p class="p1"><button class="tombol">Klik Me</button> Contoh event JQuery Click</p>

  Contoh event JQuery Click

2. Events DblClick

<p class="p2">Double click me! with jQuery.</p>

Double click me! with jQuery.

3. Events mouse enter

 
<p class="p3" style="border:1px solid #333;padding:5px;">Mouse enter!</p>

Mouse enter!

4. Events Mouse leave

 
<p class="p4" style="border:1px solid #333;padding:5px;">Mouse leave!</p>

Mouse leave!

5. Events Mouse hover

<p class="p5" style="border:1px solid #333;padding:5px;">Mouse hover
</p>

Mouse hover 

6. Events pada form  

<h2>Event pada Form<br />
</h2>
Form event : <input id="input1" type="text" /><span id="count"></span>

Event pada Form

Form event :


Gimana??? Cukup simpel kan contoh yang saya buat. Anda dapat mengembangkan sesuai kreatifitas anda, dan saya yakin anda lebih pintar dari saya, karena anda rajin belajar :)

Terima kasih, ^_^