jQuery click ()
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:
Parameters:
- function: optional parameter. It specifies the attach function which is to be executed whenever the click event occurs.
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.
<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 <p>to fade out. </p>
<span> This is a span box <span>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
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.