Skip to content
Related Articles

Related Articles

jQuery | click() with Examples

View Discussion
Improve Article
Save Article
  • Last Updated : 03 Aug, 2021
View Discussion
Improve Article
Save Article

The click() is an inbuilt method in jQuery that starts the click event or attach a function to run when a click event occurs.
Syntax:

$(selector).click(function);

Parameter: It accepts an optional parameter “function” which is used to run when a click event occurs.
Return Value: It returns the selected element with specified function to perform.

jQuery code to show the working of click() method:

Code #1:
In the below code, no function is passed to this method.




<html>
  
<head>
    <script 
    </script>
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function() {
            $("p").click();
        });
    </script>
    <style>
        p {
            display: block;
            width: 300px;
            padding: 20px;
            font-size: 30px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <!-- click on this method -->
    <p onclick="alert('paragraph was clicked')">This is a paragraph.</p>
</body>
  
</html>


Output:
Both outputs get generated simultaneously-

Code #2:
In the below code, function is passed to this method.




<html>
  
<head>
    <script 
    </script>
    <script>
        <!-- jQuery code to show the working of this method -->
        $(document).ready(function() {
            $("p").click(function() {
                $(this).fadeOut();
            });
        });
    </script>
    <style>
        p {
            display: block;
            width: 370px;
            padding: 25px;
            font-size: 25px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <!-- click on this paragraph and the paragraph will disappear -->
    <p>Click inside this block and whole block will disappear !!!</p>
</body>
  
</html>


Output:
Before clicking inside the block-

After clicking inside the block-

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!