Web Developer: July 2016

Thursday, 28 July 2016

Mouse Events in Jquery

Let us explain with an example:-

mouse.html:-

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/mouse.js"></script>
</head>

<body>
<h3>Mouse Enter Example</h3>
<p id="p1">Move your mouse to this paragraph</p>
<hr/>

<h3>Mouse Leave Example</h3>
<p id="p2">Exit mouse from this paragraph</p>
<hr/>

<h3>Mouse Down Example</h3>
<p id="p3">Mouse Down on this paragraph</p>
<hr/>

<h3>Mouse Up Example</h3>
<p id="p4">Mouse up on this paragraph</p>
</body>

</html>

mouse.js:-

$(document).ready(function(){

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

alert("You entered this paragraph");

});

$("#p2").mouseleave(function(){

alert("You just left from this paragraph");

});

$("#p3").mousedown(function(){

alert("Mouse Down on this paragraph");

});

$("#p4").mouseup(function(){

alert("Mouse up on this paragraph");

});

Screenshot:-

Explanation:-

Here, separate paragraphs have been used for all the mouse events functionality in Jquery. <p> tag has been used, declared along with the attribute "id". This "id" value has been called in the different functions of the mouse events. Different functions like "mouseenter", "mouseleave", "mousedown" and "mouseup" has been used in the above example.

Monday, 25 July 2016

dblclick() in Jquery

Let me explain you with a suitable example:-

dblclick.html:-

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/dbclick.js"></script>
</head>

<body>

<p id="p1">Double-Click on this paragraph to hide it</p>

</body>
</html>

dblclick.js:-

$(document).ready(function(){

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

$("#p1").hide();

});

Screenshot:-

Explanation:-

When we will double-click the paragraph defined in the page, that paragraph will get hidden. Here, an "id" attribute has been added along with the "p" tag/element, whose value has been called in the jquey function.

Thursday, 21 July 2016

Hide() in Jquery

Let us understand it with a suitable example:-

hide.html:-

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/hide.js"></script>
</head>
<body>

<h1>Paragraph Example</h1>
<p id="p1">Click the paragraph to hide</p>
<hr>

<h1>Button Example</h1>
<h5 id="btn1">Click button to hide the paragraph</h5>
<button>Hide</button>

</body> </html>

hide.js:-

$(document).ready(function(){
$("p").click(function(){
$("#p1").hide();
});
});

$(document).ready(function(){
$("button").click(function(){
$("#btn1").hide();
});
});

Screenshot:-

Explanations:-

Jquery is a JavaScript library. We need to include its library to use its functionality in webpage. Here, I have used the "hide()" function to hide the paragraph(<p>) tag. I have shown here, simply by clicking on the paragraph as well as by clicking on the button. I have used separate ids attribute to show the above functionality in Jquery.