AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery click ()


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

jQuery Tutorial » jQuery click

What is click in jQuery?

The Click () function is an in-built function into jQuery that starts a click event. Whenever a relevant item is clicked, an event is triggered by a click () method.

Syntax:

$(selector).click(function);

Parameters:

 

jQuery click() no parameter - Example

jQuery click() function to handle the click event without parameter function.

<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> jQuery click() function no parameter - Example </title>

</head>
<body>
<h3> This an example of jQuery click() function no parameter - Example: </h3>
<!-- click on this method -->
<button onclick = "alert( 'Button was clicked' );" style = "background-color : green; padding:10px 20px; color:#FFF" > Click the box to generate click event. </button>
<script>
$( document ).ready( function( ) {
$( "button" ).click();
});
</script>
</body>
</html>

 

Related subjects:
jQuery slideUp jQuery switchclass Effects hide / show jQuery draggable

 

Tags: jQuery click function, outside element, not working, trigger, button, deprecated, outside div, link, preventdefault
What is click in jQuery?
Is jQuery click deprecated?
How can set click event in jQuery?
What is difference between click and Onclick?

 

click function with parameter - Example

click () function in jQuery without or with parameter can be used in elements of HTML like div, paragraphs, hyperlinks, etc. for accomplishing the desired task.In the next example we use a CSS parameter.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery click() function with parameter </title>
<style>
p {
display : block;
width : 310px;
padding : 10px 20px;
font-size : 30px;
border : 2px solid red;
color: #090;
}
</style>
<script>
$(document).ready(function() {
$("p").click( function(){
$(this).css({
"color" : "red",
"border" : "2px solid green"
});
});
});
</script>
</head>
<body>
<h3> This an example of click() function with parameter: </h3>
<div>
<p> This is a paragraph and it is a child of div element. </p>
<span> This is a span box and it is a child of div element. </span>
</div>
</body>
</html>

 

click() function for multiple elements

click() function to handle the click event for multiple items with same handler function as parameter.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery click() function for multiple items</title>
<style>

p {
display : block;
width : 320px;
padding : 15px;
font-size : 24px;
border : 2px solid #0C3;
color : #00C;
font-family: "Comic Sans MS", cursive;
font-weight: bold;
}
h3 {
display : block;
width : 320px;
padding : 15px;
font-size : 24px;
border : 2px solid #F30;
color : #090;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
}
span {
display : block;
width : 320px;
padding : 15px;
font-size : 24px;
border : 2px solid #0CF;
color : #FC3;
font-weight: bold;
font-family: "Comic Sans MS", cursive;
}
</style>
<script>
$(document).ready(function() {
$( "h3, p, span" ).click( function(){
$(this).css({
"color" : "red",
"border" : "border: 2px solid #F66;"
});
});
});
</script>
</head>
<body>
<h2> This an example of click() function for multiple items: </h2>
<h3> This is a heading h3 to fade out. </h3>
<p> This is a paragraph &lt;p&gt;to fade out. </p>
<span> This is a span box &lt;span&gt;to fade out. </span>
</body>
</html>

 



jQuery click function, outside element, not working, trigger, button, deprecated, outside div, link, preventdefault
What is click in jQuery?
Is jQuery click deprecated?
How can set click event in jQuery?
What is difference between click and Onclick?
JQuery click () - jquery

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...
jQuery slideUp()...
jQuery fadeToggle...
jQuery fadeOut()...
jQuery fadeIn()...
jQuery Effects - hide () and show ()...
jQuery Events...
jQuery Attributes...
jQuery Selectors...