Jquery click() method

The "click" event occurs when an element is clicked. The click() method triggers the click event or attaches a function to run when a click event occurs.

Syntax:

$(selector).click()

Example:-

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

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

alert("The paragraph was clicked.");

});

</script>

</head>

<body>

<p>Click on this text to see the magic of click().</p>

</body>

</html>

The bind() method was deprecated in version 3.0. Use the on() method instead. The jQuery bind() event is used to attach one or more event handlers for selected elements from a set of elements. It specifies a function to run when the event occurs. So we can say that The bind() method attaches one or more event handlers for selected elements, and specifies a function to run when the event occurs.

Syntax:

$(selector).bind(event,data,function,map)

Example :-

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

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

alert("The paragraph was clicked.");

});

</script>

</head>

<body>

<p>Click here to see the magic of bind() method!</p>

</body>

</html>

focus() method

focus() method

The focus event occurs when an element gets focus (when selected by a mouse click or by "tab-navigating" to it).The focus() method triggers the focus event or attaches a function to run when a focus event occurs.

Syntex:

$(selector).focus()

Example:-

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("input").focus(function(){

$("span").css("display", "inline").fadeOut(2500);

});

</script>

<style>

span {

display: none;

}

</style>

</head>

<body>

<input>

<span>Nice to meet you Mr. Nitin chauhan !</span>

<p>Click inside the input field to get focus.</p>

</body>

</html>

Example :2-

<!DOCTYPE html>

<head>

<title>focus() demo</title>

<style>

span {

display: none;

}

</style>

</head>

<body>

<p><input type="text"> <span>Focus starts.. Write something inside input field 1.</span></p>

<p><input type="password"> <span>Focus starts.. Write something inside input field 2.</span></p>

$( "input" ).focus(function() {

$( this ).next( "span" ).css( "display", "inline" ).fadeOut( 2000 );

});

</script>

</body>

</html>

change() method

change() method

The change event occurs when the value of an element has been changed (only works on <input>, <textarea> and <select> elements).The change() method triggers the change event, or attaches a function to run when a change event occurs. This event is limited to <input> elements, <textarea> boxes and <select> elements.

Syntex:

$(selector).change()

Example :-

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("input").change(function(){

        alert("change event fired because The text of input field has been changed.");

    });

});

</script>

</head>

<body>

<input type="text">

<p>Write something in the input field, and then press enter or Tab or click outside the input field.</p>

</body>

</html>

select() method

select() method

The select event occurs when a text is selected (marked) in a text area or a text field. The select() method triggers the select event or attaches a function to run when a select event occurs.

Syntex:

$(selector).select()

Example :-

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("input").select(function(){

        alert("Text selected from textbox !");

    });

});

</script>

</head>

<body>

<input type="text" value="Hello 'Nitin Kumar chauhan'" style="height:30px;width:200px">

<p>Select some text from textbox .</p>

</body>

</html>

Jquery keypress() Method

keypress() method

The keypress() method triggers the keypress event, or attaches a function to run when a keypress event occurs.The keypress event is similar to the keydown event. The event occurs when a button is pressed down.However, the keypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC). Use the keydown() method to also check these keys.

The order of events related to the keypress event:

· keydown - The key is on its way down

· keypress - The key is pressed down

· keyup - The key is released

Syntex:-

$(selector).keypress()

Example :-

<!DOCTYPE html>

<html>

<head>

i = 0;

$(document).ready(function(){

$("input").keypress(function(){

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

});

</script>

</head>

<body>

Enter something inside textbox: <input type="text">

<p>Keypresses count: <span>0</span></p>

</body>

</html>

Jquery keyup() Method

jQuery keyup method triggers when you release the pressed key. You can attach functions to execute when this event occurs.

The order of events related to the keyup event:

Ø keydown - The key is on its way down

Ø keypress - The key is pressed down

Ø keyup - The key is released

The keyup event occurs when a keyboard key is released.

Syntex:-

$(selector).keyup()

Example :

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script>

$(document).ready(function(){

    $("input").keydown(function(){

        $("input").css("background-color", "blue");

    });

    $("input").keyup(function(){

        $("input").css("background-color", "red");

    });

});

</script>

</head>

<body>

Write something inside textbox: <input type="text">

</body>

</html>

Jquery mouseenter()

The mouseenter event occurs when the mouse pointer is over (enters) the selected element.The mouseenter() method triggers the mouseenter event, or attaches a function to run when a mouseenter event occurs. So we can say that The mouseenter() method adds an event handler function to an HTML element. This function is executed, when the mouse pointer enters the HTML element.

Syntax:-

$(selector).mouseenter()

Example :-

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("#h1").mouseenter(function(){

       $( "div" ).text( " Mouse Pointer entered on heading" ).show().fadeOut( 4000 );

    });

});

</script>

</head>

<body>

<h1 id="h1">Move Mouse Pointer on this heading </h1>

<div></div>

</body>

</html>

Difference between mousemove, mouseenter and mouseover.

Ø  The mouseover event triggers when the mouse pointer enters the div element, and its child elements.

Ø  The mouseenter event is only triggered when the mouse pointer enters the div element.

Ø  The onmousemove event triggers every time the mouse pointer is moved over the div element.

Example :-

<!DOCTYPE html>

<html>

<head>

<style>

div {

    width: 150px;

    height: 100px;

    border: 1px solid black;

    margin: 10px;

    float: left;

    padding: 30px;

    text-align: center;

    background-color: lightgray;

}

h3 {

    background-color: white;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

var x = 0;

var y = 0;

var z = 0;

$(document).ready(function(){

    $("div.over").mouseover(function(){

        $(".over span").text(x += 1);

    });

    $("div.enter").mouseenter(function(){

        $(".enter span").text(y += 1);

    });

    $("div.move").mousemove(function(){

        $(".move span").text(z += 1);

    });

});

</script>

</head>

<body>

<h1>Example of Mouseover , MouseEnter and MouseMove</h1>

<div class="over" style="background-color:red">

<h3>Mouseover event triggered: <span></span></h3>

</div>

<div class="enter" style="background-color:green">

<h3>Mouseenter event triggered: <span></span></h3>

</div>

<div class="move" style="background-color:yellow">

<h3>Mousemove event triggered: <span></span></h3>

</div>

</body>

</html>