Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery | click() with Examples

  • Last Updated : 03 Aug, 2021

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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 :