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,

</>
Copy
$("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.

</>
Copy
<!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.

</>
Copy
<!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.

</>
Copy
<!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.

</>
Copy
<!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.