jQuery - Focus, click, hover en keypress


Handig in het geval van bijvoorbeeld invoervelden is dat je bepaalde acties kunt uitvoeren op het moment dat iemand klikt in het invoerveld. Zodoende kun je dan dus de opmaak van het veld wijzigen of zoals hieronder in het voorbeeld het bijbehorende label een bepaalde classnaam geven. Zo kan er ook op basis van het klikken op een element een bepaalde actie uitgevoerd worden evenals op mouseover. Op de laatste regel staat 'keypress' om een bepaalde actie uit te voeren zodra iemand begint met typen van tekst.

Een aantal voorbeelden hieronder.

$(document).ready(function() {
        $("input").focus(function() {
                $("label[for='" + this.id + "']").addClass("active");
        }).focusout(function() {
                $("label").removeClass("active");
        });

        $('.input').keypress(function() {
                $('.element').fadeIn('slow').css('display', 'block');
        });

        $('a.hide').click(function(){
                $('.element').fadeOut('fast');
        });

        $("div.example").hover(function() {
                $("a").addClass("hover");
        },function() {
                $("a").removeClass("hover");
        });

        $("ul li").mouseover(function loadelement() {
                $(this).addClass('active');
        });
        $("ul li").mouseleave(function loadelement() {
                $(this).addClass('active');
        });