jQuery | click() with Examples
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.
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.
.png)
