jQuery click
jQuery click() method attaches an event listener to listen for mouse click events on the HTML Element(s). When a user clicks on the element, the click event listener is triggered and the function inside the click() method is executed.
jquery click() method could be called on HTML Element(s) filtered via jQuery Selector.
In this tutorial, you will learn about jQuery slideUp() method, its syntax and usage, with examples.
Syntax jQuery click
The following is the syntax to use jQuery dblclick() method.
To execute a function when the HTML document is loaded completely in a browser window,
$("selector").click(function(){
// your javascript/jquery statements here
});
Examples jQuery click
The following examples help you understand the usage of jQuery click() method :
1 Example Display an alert when user clicks on paragraph elements
In the following example, we have attached a click listener for all the paragraphs. When you click on a paragraph, the function inside click method is executed. We have an alert method, so an alert would appear.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
alert("You clicked on a paragraph.");
});
});
</script>
</head>
<body>
<p>A paragraph.</p>
<p>Another paragraph.</p>
<a>Nothing happens when you click on this, cause this is anchor.<a/>
</body>
</html>
2 Example Change Text of paragraph when user clicks on it
With the help of $(this) and text() methods, when user clicks on a paragraph, we change the text.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).text("Why you clicked me ");
});
});
</script>
</head>
<body>
<p>A paragraph.</p>
<p>Another paragraph.</p>
<a>Nothing happens when you click on this, cause this is anchor.<a/>
</body>
</html>
3 Example Change color of the paragraph that has been clicked on
$(this) references the element on which the event is triggered. In the following example, when user clicks on a paragraph, its color is changed to green.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).css("color","green");
});
});
</script>
</head>
<body>
<p>A paragraph.</p>
<p>Another paragraph.</p>
<a>Nothing happens when you click on this, cause this is anchor.<a/>
</body>
</html>
4 Example Make the paragraph disappear when you click on it
In the following jQuery click() example, with the help of hide() method, we make a paragraph disappear when user clicks on it.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>A paragraph.</p>
<p>Another paragraph.</p>
<a>Nothing happens when you click on this, cause this is anchor.<a/>
</body>
</html>
Conclusion
In this jQuery Tutorial, we have learnt jQuery click() method : Syntax and Usage with examples.