Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    Jquery Browser Events Models

    Uploaded by

    vinothchintam12

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Jquery Browser Events Models

    Uploaded by

    vinothchintam12
    3 views4 pages

    Original Title

    jQuery Browser Events Models

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    3 views4 pages

    Jquery Browser Events Models

    Uploaded by

    vinothchintam12

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 4

    jQuery Browser Events Models

    jQuery enhances the basic event-handling mechanisms by offering the events methods for most
    native browser events, some of these methods are ready(), click(), keypress(), focus(), blur(),
    change(), etc. For example, to execute some JavaScript code when the DOM is ready, you can use the
    jQuery ready() method, like this:

    The click() Method

    The jQuery click() method attach an event handler function to the selected elements for "click"
    event. The attached function is executed when the user clicks on that element.

    Ex:-

    <script>

    $(document).ready(function(){

    $("p").click(function(){

    $(this).slideUp();

    });

    });

    </script>

    The dblclick() Method

    The jQuery dblclick() method attach an event handler function to the selected elements for "dblclick"
    event.

    <script>

    $(document).ready(function(){

    $("p").dblclick(function(){

    $(this).slideUp();

    });

    });

    </script>

    The hover() Method

    The jQuery hover() method attach one or two event handler functions to the selected elements that
    is executed when the mouse pointer enters and leaves the elements.
    <script>

    $(document).ready(function(){

    $("p").hover(function(){

    $(this).addClass("highlight");

    }, function(){

    $(this).removeClass("highlight");

    });

    });

    </script>

    The mouseenter() Method

    The jQuery mouseenter() method attach an event handler function to the selected elements that is
    executed when the mouse enters an element.

    <script>

    $(document).ready(function(){

    $("p").mouseenter(function(){

    $(this).addClass("highlight");

    });

    });

    </script>

    <script>

    $(document).ready(function(){

    $("p").mouseleave(function(){

    $(this).removeClass("highlight");

    });

    });

    </script>

    The keypress() Method

    The jQuery keypress() method attach an event handler function to the selected elements (typically
    form controls) that is executed when the browser receives keyboard input from the user.
    <script>

    $(document).ready(function(){

    var i = 0;

    $('input[type="text"]').keypress(function(){

    $("span").text(i += 1);

    $("p").show().fadeOut();

    });

    });

    </script>

    The keydown() Method

    The jQuery keydown() method attach an event handler function to the selected elements (typically
    form controls) that is executed when the user first presses a key on the keyboard.

    <script>

    $(document).ready(function(){

    var i = 0;

    $('input[type="text"]').keydown(function(){

    $("span").text(i += 1);

    $("p").show().fadeOut();

    });

    });

    </script>

    The jQuery keyup() method attach an event handler function to the selected elements (typically form
    controls) that is executed when the user releases a key on the keyboard.

    <script>

    $(document).ready(function(){

    var i = 0;

    $('input[type="text"]').keyup(function(){

    $("span").text(i += 1);

    $("p").show().fadeOut();

    });
    });

    </script>

    You might also like