JQuery Tutorial for Beginners with Examples Step by Step
How to create website using JQuery?
JQuery is an easy programming language to learn, JQuery simplifies the JavaScript programming and JQuery is also a inclusive part of JavaScript Library.
You must have a basic knowledge of HTML, CSS, JavaScript before you start studying jQuery.
The purpose of JQuery is to simplify the use of JavaScript in website
JQuery does a lot of tasks which require many lines of JavaScript code for execution and pack those into single method that you can call with a single line of code in your web application
JQuery simplifies a lot of the complicated things from JavaScript like DOM manipulation and AJAX calls, the JQuery library contains the following features
AJAX
Utilities
Effects and animations
HTML/DOM manipulation
CSS manipulation
HTML event methods
There are lots of other JavaScript frameworks out there but jQuery seems to be the most popular, and also the most extendable
JQuery Tutorial for Beginners with Examples Step by Step
J-Query Form Example
See the example bellow :-
This is a simple form including both Login and SignUp options using JQuery Hide() and Show() event
<html>
<head>
<title>GYAN Tutorial Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://website.gyaann.com/bootstrap.min.css">
</head>
<body style="background-color:#99ff99">
<div style="margin-top:40px; margin-left:35%; width:30%;">
<a href="#"><h5 id="login" style="margin-bottom:0px; border:2px solid #66ff66; border-radius:20px 0px 0px 0px; background-color:green; line-height:32px; color:#ffffff; font-family:myfont;" class="col-lg-6"><center>Login</center></h5><h5 id="signup" style="margin-bottom:0px; border:2px solid #66ff66; border-radius:0px 20px 0px 0px; background-color:green; line-height:32px; color:#ffffff; font-family:myfont;" class="col-lg-6"><center>SignUp</center></h5></a>
<form action="class.php" method="post" id="sign-form" style="display:none; margin-bottom:0px; border-radius:0px 0px 20px 20px; background-color:#66ff66;" class="col-lg-12"><br><br>
<label style="font-family:myfont" class="col-lg-6">Full Name</label>
<input style="font-family:myfont; background-color:#ffffcc; border-radius:4px; border:1px solid #999999;" class="col-lg-6" type="text" placeholder="Enter your Name" name="name"><br><br>
<label style="font-family:myfont" class="col-lg-6">Full Address</label>
<input style="font-family:myfont; background-color:#ffffcc; border-radius:4px; border:1px solid #999999;" class="col-lg-6" type="text" placeholder="Enter your Address" name="address"><br><br>
<label style="font-family:myfont" class="col-lg-6">Contact Number</label>
<input style="font-family:myfont; background-color:#ffffcc; border-radius:4px; border:1px solid #999999;" class="col-lg-6" type="number" placeholder="Enter your Number" name="number"><br><br>
<label style="font-family:myfont" class="col-lg-6">Enter Username</label>
<input style="font-family:myfont; background-color:#ffffcc; border-radius:4px; border:1px solid #999999;" class="col-lg-6" type="text" placeholder="Enter Username" name="username"><br><br>
<label style="font-family:myfont" class="col-lg-6">Enter Password</label>
<input style="font-family:myfont; background-color:#ffffcc; border-radius:4px; border:1px solid #999999;" class="col-lg-6" type="password" placeholder="Enter Password" name="password"><br><br>
<label style="font-family:myfont" class="col-lg-6">Confirm Password</label>
<input style="font-family:myfont; background-color:#ffffcc; border-radius:4px; border:1px solid #999999;" class="col-lg-6" type="password" placeholder="Confirm your Password"><br><br>
<center><input style="border:2px solid #333333; border-radius:20px" type="submit" value="SignUp"></center><br><br>
</form>
<form action="class.php" method="post" id="login-form" style="margin-bottom:0px; border-radius:0px 0px 20px 20px; background-color:#66ff66;" class="col-lg-12"><br><br>
<label style="font-family:myfont" class="col-lg-6">Enter Username</label>
<input style="font-family:myfont; background-color:#ffffcc; border-radius:4px; border:1px solid #999999;" class="col-lg-6" type="text" placeholder="Enter Username" name="username"><br><br>
<label style="font-family:myfont" class="col-lg-6">Enter Password</label>
<input style="font-family:myfont; background-color:#ffffcc; border-radius:4px; border:1px solid #999999;" class="col-lg-6" type="password" placeholder="Enter Password" name="password"><br><br>
<center><input style="border:2px solid #333333; border-radius:20px" type="submit" value="Login"></center><br><br>
</form>
</div>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#login").click(function()
{
$("#sign-form").hide();
$("#login-form").show();
});
$("#signup").click(function()
{
$("#sign-form").show();
$("#login-form").hide();
});
});
</script>
</body>
</html>
Show
JQuery Tutorial for Beginners with Examples Step by Step
J-Query Menu Example
See the example bellow :-
This is a menu List created by simple JQuery Hide() and Show() event
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-image:url('https://website.gyaann.com/b17.jpg');
background-size:100% 100%;
}
ul
{
position:fixed;
}
.li-main
{
margin-bottom:4px;
width:100%;
line-height:40px;
background-color:#003300;
color:#ffffff;
border-radius:4px;
box-shadow:1px 1px 1px #000000;
list-style:none;
}
.li-main:hover
{
background-color:#ffffff;
color:#003300;
}
.li-sub
{
margin-bottom:4px;
width:100%;
line-height:40px;
background-color:#336600;
color:#ffffff;
border-radius:4px;
box-shadow:1px 1px 1px #000000;
list-style:none;
}
.li-sub:hover
{
background-color:#ffffff;
color:#336600;
}
img
{
padding:10px;
width:44%;
height:36%;
border:1px solid #003300;
box-shadow:1px 1px 1px #003300;
}
a
{
text-decoration:none;
}
#hide-menu1, #hide-menu2, #hide-menu3, #hide-menu4, #a-sub-menu1, #a-sub-menu2, #b-sub-menu1, #b-sub-menu2, #c-sub-menu1, #c-sub-menu2, #d-sub-menu1, #d-sub-menu2, #div1, #div2, #div3, #div4, #div5, #div6, #div7
{
display:none;
}
</style>
</head>
<body>
<div style="margin-left:10%; width:80%">
<center><h2 style="background-color:#99ff99; line-height:48px; border:4px solid #003300; color:#003300;">J-Query Example of Menu List</h2></center>
<ul style="width:16%">
<center><a href="#"><li id="show-menu1" class="li-main"><b>Show Menu 1</b></li></a></center>
<center><a href="#"><li id="hide-menu1" class="li-main"><b>Hide Menu 1</b></li></a></center>
<center><a href="#"><li id="a-sub-menu1" class="li-sub"><b>Sub Menu 1</b></li></a></center>
<center><a href="#"><li id="a-sub-menu2" class="li-sub"><b>Sub Menu 2</b></li></a></center>
<center><a href="#"><li id="show-menu2" class="li-main"><b>Show Menu 2</b></li></a></center>
<center><a href="#"><li id="hide-menu2" class="li-main"><b>Hide Menu 2</b></li></a></center>
<center><a href="#"><li id="b-sub-menu1" class="li-sub"><b>Sub Menu 1</b></li></a></center>
<center><a href="#"><li id="b-sub-menu2" class="li-sub"><b>Sub Menu 2</b></li></a></center>
<center><a href="#"><li id="show-menu3" class="li-main"><b>Show Menu 3</b></li></a></center>
<center><a href="#"><li id="hide-menu3" class="li-main"><b>Hide Menu 3</b></li></a></center>
<center><a href="#"><li id="c-sub-menu1" class="li-sub"><b>Sub Menu 1</b></li></a></center>
<center><a href="#"><li id="c-sub-menu2" class="li-sub"><b>Sub Menu 2</b></li></a></center>
<center><a href="#"><li id="show-menu4" class="li-main"><b>Show Menu 4</b></li></a></center>
<center><a href="#"><li id="hide-menu4" class="li-main"><b>Hide Menu 4</b></li></a></center>
<center><a href="#"><li id="d-sub-menu1" class="li-sub"><b>Sub Menu 1</b></li></a></center>
<center><a href="#"><li id="d-sub-menu2" class="li-sub"><b>Sub Menu 2</b></li></a></center>
</ul>
<div style="float:right; width:74%">
<div id="div1" style="width:100%">
<img src='https://website.gyaann.com/b1.jpg' alt='no image'>
<img src='https://website.gyaann.com/b2.jpg' alt='no image'>
<img src='https://website.gyaann.com/b3.jpg' alt='no image'>
<img src='https://website.gyaann.com/b4.jpg' alt='no image'>
</div>
<div id="div2" style="width:100%">
<img src='https://website.gyaann.com/b5.jpg' alt='no image'>
<img src='https://website.gyaann.com/b6.jpg' alt='no image'>
<img src='https://website.gyaann.com/b7.jpg' alt='no image'>
<img src='https://website.gyaann.com/b8.jpg' alt='no image'>
</div>
<div id="div3" style="width:100%">
<img src='https://website.gyaann.com/b9.jpg' alt='no image'>
<img src='https://website.gyaann.com/b10.jpg' alt='no image'>
<img src='https://website.gyaann.com/b11.jpg' alt='no image'>
<img src='https://website.gyaann.com/b12.jpg' alt='no image'>
</div>
<div id="div4" style="width:100%">
<img src='https://website.gyaann.com/b13.jpg' alt='no image'>
<img src='https://website.gyaann.com/b14.jpg' alt='no image'>
<img src='https://website.gyaann.com/b15.jpg' alt='no image'>
<img src='https://website.gyaann.com/b16.jpg' alt='no image'>
</div>
<div id="div5" style="width:100%">
<img src='https://website.gyaann.com/b4.jpg' alt='no image'>
<img src='https://website.gyaann.com/b3.jpg' alt='no image'>
<img src='https://website.gyaann.com/b2.jpg' alt='no image'>
<img src='https://website.gyaann.com/b1.jpg' alt='no image'>
</div>
<div id="div6" style="width:100%">
<img src='https://website.gyaann.com/b8.jpg' alt='no image'>
<img src='https://website.gyaann.com/b7.jpg' alt='no image'>
<img src='https://website.gyaann.com/b6.jpg' alt='no image'>
<img src='https://website.gyaann.com/b5.jpg' alt='no image'>
</div>
<div id="div7" style="width:100%">
<img src='https://website.gyaann.com/b12.jpg' alt='no image'>
<img src='https://website.gyaann.com/b11.jpg' alt='no image'>
<img src='https://website.gyaann.com/b10.jpg' alt='no image'>
<img src='https://website.gyaann.com/b9.jpg' alt='no image'>
</div>
<div id="div8" style="width:100%">
<img src='https://website.gyaann.com/b16.jpg' alt='no image'>
<img src='https://website.gyaann.com/b15.jpg' alt='no image'>
<img src='https://website.gyaann.com/b14.jpg' alt='no image'>
<img src='https://website.gyaann.com/b13.jpg' alt='no image'>
</div>
</div>
</div>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#show-menu1").click(function()
{
$("#show-menu1").hide();
$("#hide-menu1").show();
$("#a-sub-menu1").show();
$("#a-sub-menu2").show();
});
$("#hide-menu1").click(function()
{
$("#show-menu1").show();
$("#hide-menu1").hide();
$("#a-sub-menu1").hide();
$("#a-sub-menu2").hide();
});
$("#show-menu2").click(function()
{
$("#show-menu2").hide();
$("#hide-menu2").show();
$("#b-sub-menu1").show();
$("#b-sub-menu2").show();
});
$("#hide-menu2").click(function()
{
$("#show-menu2").show();
$("#hide-menu2").hide();
$("#b-sub-menu1").hide();
$("#b-sub-menu2").hide();
});
$("#show-menu3").click(function()
{
$("#show-menu3").hide();
$("#hide-menu3").show();
$("#c-sub-menu1").show();
$("#c-sub-menu2").show();
});
$("#hide-menu3").click(function()
{
$("#show-menu3").show();
$("#hide-menu3").hide();
$("#c-sub-menu1").hide();
$("#c-sub-menu2").hide();
});
$("#show-menu4").click(function()
{
$("#show-menu4").hide();
$("#hide-menu4").show();
$("#d-sub-menu1").show();
$("#d-sub-menu2").show();
});
$("#hide-menu4").click(function()
{
$("#show-menu4").show();
$("#hide-menu4").hide();
$("#d-sub-menu1").hide();
$("#d-sub-menu2").hide();
});
$("#a-sub-menu1").click(function()
{
$("#div1").show();
$("#div2").hide();
$("#div3").hide();
$("#div4").hide();
$("#div5").hide();
$("#div6").hide();
$("#div7").hide();
$("#div8").hide();
});
$("#a-sub-menu2").click(function()
{
$("#div2").show();
$("#div1").hide();
$("#div3").hide();
$("#div4").hide();
$("#div5").hide();
$("#div6").hide();
$("#div7").hide();
$("#div8").hide();
});
$("#b-sub-menu1").click(function()
{
$("#div3").show();
$("#div1").hide();
$("#div2").hide();
$("#div4").hide();
$("#div5").hide();
$("#div6").hide();
$("#div7").hide();
$("#div8").hide();
});
$("#b-sub-menu2").click(function()
{
$("#div4").show();
$("#div1").hide();
$("#div2").hide();
$("#div3").hide();
$("#div5").hide();
$("#div6").hide();
$("#div7").hide();
$("#div8").hide();
});
$("#c-sub-menu1").click(function()
{
$("#div5").show();
$("#div1").hide();
$("#div2").hide();
$("#div3").hide();
$("#div4").hide();
$("#div6").hide();
$("#div7").hide();
$("#div8").hide();
});
$("#c-sub-menu2").click(function()
{
$("#div6").show();
$("#div1").hide();
$("#div2").hide();
$("#div3").hide();
$("#div4").hide();
$("#div5").hide();
$("#div7").hide();
$("#div8").hide();
});
$("#d-sub-menu1").click(function()
{
$("#div7").show();
$("#div1").hide();
$("#div2").hide();
$("#div3").hide();
$("#div4").hide();
$("#div5").hide();
$("#div6").hide();
$("#div8").hide();
});
$("#d-sub-menu2").click(function()
{
$("#div8").show();
$("#div1").hide();
$("#div2").hide();
$("#div3").hide();
$("#div4").hide();
$("#div5").hide();
$("#div6").hide();
$("#div7").hide();
});
});
</script>
</body>
</html>
Show
JQuery Tutorial for Beginners with Examples Step by Step
How to use JQuery, why and what is JQuery?
How will you add JQuery to Your website?
Include jQuery from a CDN, like Google
Download the jQuery library from jQuery.com
Both versions can be downloaded from jQuery.com
The JQuery library is a single JavaScript file and you reference it with the HTML <script> </script> tags. The <script> </script> tags must be inside the <head> </head> section. See the example below
<head>
<script src="jquery-3.2.1.min.js">
</script>
</head>
Use the following to use JQuery from Google or Microsoft:
Google CDN
<head>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js">
</script>
</head>
Microsoft CDN
<head>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js">
</script>
</head>
JQuery Tutorial for Beginners with Examples Step by Step
How to use JQuery Syntax?
The JQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s)
The JQuery action() use to perform on the specified element(s)
The (selector) to "query" or to "find" HTML elements
The $ sign is use to define/access jQuery element
See below for example:
$(this).hide() :- hides the current element
$("h1").hide() :- hides all <h1> elements
$(".head").hide() :- hides all elements of class "head"
$("#menu").hide() :- hides the element whose id is "menu"
JQuery methods must be inside a document ready event to prevent any JQuery code from running before the document is finished loading. It is batter practice to wait for the document to be fully loaded and ready before working with it.
Here are some examples of actions that can fail if methods are run before the document is fully loaded.
Trying to get the size of an image that is not loaded yet
Trying to hide an element that is not created yet
$(document).ready(function()
{
// Write the JQuery methods here.......
});
$(function()
{
// Write the JQuery methods here.......
});
JQuery Tutorial for Beginners with Examples Step by Step
How to use JQuery Selector?
As per creating an web application JQuery selectors are one of the most important parts of the JQuery library. JQuery selectors allow you to select and manipulate HTML element(s).
JQuery selectors are used for "query" and "find" or "select" HTML elements based on their name, id, classes and attributes. It is based on the existing CSS define Selectors and in addition it also has some own custom user define selectors.
The selectors in JQuery start with the dollar sign: $()
The JQuery element selector selects elements based on the element name. See the example bellow
You can select all <h1> elements on a page like this :- $("h1")
<html>
<head><title>How to use JQuery to hide Element</title></head>
<body>
<center><h1>This heading will be hide</h1></center>
<center><button>Click me to hide heading</button></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$("h1").hide();
});
});
</script>
</body>
</html>
The JQuery element selector selects elements based on class. See the example bellow
You can select all elements with a define class on an application like heading :- $(".heading")
<html>
<head><title>How to use JQuery to hide Element</title></head>
<body>
<center><h1 class="heading">This heading will be hide</h1></center>
<center><h2 class="heading">This heading will be hide</h2></center>
<center><h3 class="heading">This heading will be hide</h3></center>
<center><h4 class="heading">This heading will be hide</h4></center>
<center><h5 class="heading">This heading will be hide</h5></center>
<center><h6 class="heading">This heading will be hide</h6></center>
<center><button>Click me to hide heading</button></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$(".heading").hide();
});
});
</script>
</body>
</html>
The JQuery element selector selects elements based on specific or define ID. See the example bellow
You can select the element of that specific ID of any application like para :- $("#para")
<html>
<head><title>How to use JQuery to hide Element</title><style>#para {color:red};</style></head>
<body>
<center><h1>This heading will be hide</h1></center>
<center><h1>This heading will be hide</h1></center>
<center><h1 id="para">This heading will be hide</h1></center>
<center><h1>This heading will be hide</h1></center>
<center><h1>This heading will be hide</h1></center>
<center><h1>This heading will be hide</h1></center>
<center><button>Click me to hide heading</button></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$("#para").hide();
});
});
</script>
</body>
</html>
JQuery Tutorial for Beginners with Examples Step by Step
How to use JQuery Event?
All actions that a web page can respond to are called events and JQuery plays a vital role for those different events.
An event is nothing other than when something is happen due to some movement or interaction by the user in a particular web page or it may also be some automated response that happens during the web page session. It totally depends upon the website developers as how they had programmed in the application.
Clicking on an element may create an event
Selecting a radio button may create an event
Moving a mouse over an element may also create an event
To assign a click event to all <h1> elements on a page :-
$("h1").click();
We have to define something like this, see below :-
$("h1").click(function()
{
//Write the action here!!
});
<html>
<head><title>How to use JQuery on click event</title></head>
<body>
<center><h1>On click event will generate and this heading will hide</h1></center>
<center><a href="#"><h1>Click me to generate an on click event and hide heading</h1></a></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("h1").click(function()
{
$("h1").hide();
});
});
</script>
</body>
</html>
When the user double-clicks on any HTML element then the function is executed. We need to use the dblclick() method to execute this function.To assign a double click event to all <h1> elements on a page :-
$("h1").dblclick();
We have to define something like this, see below :-
$("h1").dblclick(function()
{
//Write the action here!!
});
<html>
<head><title>How to use JQuery on double click event</title></head>
<body>
<center><h2>On click event will generate and this H2 heading will hide</h2></center>
<center><a href="#"><h1>Double Click me to generate an event and hide the h2 elements</h1></a></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("h1").dblclick(function()
{
$("h2").hide();
});
});
</script>
</body>
</html>
When the user moves mouse pointer over the HTML element then the function is executed. We need to use the mouseleave() method to execute this function.To assign a mouseleave() event to all <h1> elements on a page :-
$("h1").mouseleave();
We have to define something like this, see below :-
$("h1").mouseleave(function()
{
//Write the action here!!
});
<html>
<head><title>How to use JQuery on mouseleave click event</title></head>
<body>
<center><h2>The mouseleave event will generate and this H1 and H2 heading will hide</h2></center>
<center><a href="#"><h1>Move your mouse over me to generate an event and hide both the h1 and h2 elements</h1></a></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("h1").mouseleave(function()
{
alert("h1 and h2 heading will appear!");
$("h1").hide();
$("h2").hide();
});
});
</script>
</body>
</html>
When the user keep the mouse pointer over the HTML element then the function is executed. We need to use the mouseenter() method to execute this function.To assign a mouseenter() event to all <h1> elements on a page :-
$("h1").mouseenter();
We have to define something like this, see below :-
$("h1").mouseenter(function()
{
//Write the action here!!
});
<html>
<head><title>How to use JQuery on mouseenter click event</title></head>
<body>
<center><h2>The mouseenter event will generate and this H1 and H2 heading will hide</h2></center>
<center><a href="#"><h1>Keep your mouse over me to generate an event and hide both the h1 and h2 elements</h1></a></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("h1").mouseenter(function()
{
alert("h1 and h2 heading will appear!");
$("h1").hide();
$("h2").hide();
});
});
</script>
</body>
</html>
When the left, middle or right mouse button is pressed by the user over an HTML element then the function is executed. We need to use the mousedown() method to execute this function.To assign a mousedown() event to all <h3> elements on a page :-
$("h3").mousedown();
We have to define something like this, see below :-
$("h3").mousedown(function()
{
//Write the action here!!
});
<html>
<head><title>What is JQuery mousedown event</title></head>
<body>
<center><h2>The mousedown event will generate and this H3 and H2 heading will hide</h2></center>
<center><a href="#"><h3>Click left, right or middle button of mouse over me to generate an event and hide both the h3 and h2 elements</h3></a></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("h3").mousedown(function()
{
alert("h3 and h2 heading will appear!");
$("h3").hide();
$("h2").hide();
});
});
</script>
</body>
</html>
When the left, middle or right mouse button is pressed by the user over an HTML element then the function is executed. We need to use the mouseup() method to execute this function.To assign a mouseup() event to all <h3> elements on a page :-
$("h3").mouseup();
We have to define something like this, see below :-
$("h3").mouseup(function()
{
//Write the action here!!
});
<html>
<head><title>What is JQuery mouseup event</title></head>
<body>
<center><h2>The mouseup event will generate and this H3 and H2 heading will hide</h2></center>
<center><a href="#"><h3>Click left, right or middle button of mouse over me to generate an event and hide both the h3 and h2 elements</h3></a></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("h3").mouseup(function()
{
alert("h3 and h2 heading will appear!");
$("h3").hide();
$("h2").hide();
});
});
</script>
</body>
</html>
The hover() method takes two functions and is a combination of both the mouseleave() and the mouseenter() methods. Both the function execute subsequently, first function is executed when the mouse enters the HTML element and the second function is executed when the mouse leaves the HTML element, that how this method work, See the example bellow :-
<html>
<head><title>What is JQuery hover method</title></head>
<body>
<center><h2>The hover event will generate and this H3 and H2 heading will hide</h2></center>
<center><a href="#"><h3>Just move your mouse over me to generate an event and hide both the h3 and h2 elements</h3></a></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("h3").hover(function()
{
alert("h3 and h2 heading will disappear!");
$("h3").hide();
$("h2").hide();
},
function()
{
alert("h3 and h2 heading will appear!");
$("h3").show();
$("h2").show();
});
});
</script>
</body>
</html>
The focus() function is executed when the form field gets focus this method attaches an event handler function to an HTML form field.
<html>
<head><title>What is JQuery focus event</title></head>
<body>
<center><h3>When user select the input field then the focus event will generate and this form input background and border color will change</h3></center>
<center><label>Username Name: </label><input type="text"></center><br>
<center><label>Password: </label><input type="password"></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("input").focus(function()
{
$(this).css("background-color", "skyblue");
$(this).css("border", "1px solid blue");
});
});
</script>
</body>
</html>
The blur() function is executed when the form field gets out of focus this method attaches an event handler function to an HTML form field.
<html>
<head><title>What is JQuery blur event</title></head>
<body>
<center><h3>When user deselect the input field then the blur event will generate and this form input background and border color will change</h3></center>
<center><label>Username Name: </label><input type="text"></center><br>
<center><label>Password: </label><input type="password"></center><br>
<center><label>School: </label><input type="text"></center><br>
<center><label>Class: </label><input type="password"></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("input").blur(function()
{
$(this).css("background-color", "skyblue");
$(this).css("border", "1px solid blue");
});
});
</script>
</body>
</html>
JQuery Tutorial for Beginners with Examples Step by Step
How to use JQuery Fade and Slide Methods?
Using JQuery you can fade elements in and out of visibility in your web page
JQuery has the following fade methods, See below :-
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
See the example bellow, JQuery fadeIn() Method
<html>
<head><title>What is JQuery fadeIn event</title></head>
<body>
<center><h4 style="display:none;">This H4 will fade in slowly</h4></center>
<center><h3 style="display:none;color:blue">This H3 will fade in within 2 seconds</h3></center>
<center><h2 style="display:none;color:green">This H2 will fade in within 4 seconds</h2></center>
<center><h1 style="display:none;color:red">This H1 will fade in within 6 seconds</h1></center>
<center><button>Click me to fade in H1, H2, H3 ,H4</button></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
alert("h4, h3, h2 and h1 will appear one by one!");
$("h4").fadeIn("slow");
$("h3").fadeIn(2000);
$("h2").fadeIn(4000);
$("h1").fadeIn(6000);
});
});
</script>
</body>
</html>
See the example bellow, JQuery fadeOut() Method
<html>
<head><title>What is JQuery fadeOut event</title></head>
<body>
<center><h4>This H4 will fade out slowly</h4></center>
<center><h3 style="color:blue">This H3 will fade out within 2 seconds</h3></center>
<center><h2 style="color:green">This H2 will fade out within 4 seconds</h2></center>
<center><h1 style="color:red">This H1 will fade out within 6 seconds</h1></center>
<center><button>Click me to fade out H1, H2, H3 ,H4</button></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
alert("h4, h3, h2 and h1 will disappear one by one!");
$("h4").fadeOut("slow");
$("h3").fadeOut(2000);
$("h2").fadeOut(4000);
$("h1").fadeOut(6000);
});
});
</script>
</body>
</html>
See the example bellow, JQuery fadeToggle() Method
<html>
<head><title>What is JQuery fadeToggle event</title></head>
<body>
<center><h4>This H4 will fade toggle slowly</h4></center>
<center><h3 style="color:blue">This H3 will fade toggle within 2 seconds</h3></center>
<center><h2 style="color:green">This H2 will fade toggle within 4 seconds</h2></center>
<center><h1 style="color:red">This H1 will fade toggle within 6 seconds</h1></center>
<center><button>Click me to fade toggle H1, H2, H3 ,H4</button></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
alert("h4, h3, h2 and h1 will toggle one by one!");
$("h4").fadeToggle("slow");
$("h3").fadeToggle(2000);
$("h2").fadeToggle(4000);
$("h1").fadeToggle(6000);
});
});
</script>
</body>
</html>
See the example bellow, JQuery fadeTo() Method
<html>
<head><title>What is JQuery fadeTo event</title></head>
<body>
<center><h4>This H4 will fade slowly</h4></center>
<center><h3 style="color:blue">This H3 will fade within 2 seconds</h3></center>
<center><h2 style="color:green">This H2 will fade within 4 seconds</h2></center>
<center><h1 style="color:red">This H1 will fade within 6 seconds</h1></center>
<center><button>Click me to fade H1, H2, H3 ,H4</button></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
alert("h4, h3, h2 and h1 will fade one by one!");
$("h4").fadeTo("slow", 0.40);
$("h3").fadeTo(2000, 0.30);
$("h2").fadeTo(4000, 0.20);
$("h1").fadeTo(6000, 0.10);
});
});
</script>
</body>
</html>
See the example bellow for JQuery slide() Method
<html>
<head><title>What is JQuery slide() Method?</title></head>
<body>
<center><h4 style="display:none">This H4 will slide slowly</h4></center>
<center><h3 style="display:none;color:blue">This H3 will slide within 2 seconds</h3></center>
<center><h2 style="color:green">This H2 will slide within 4 seconds</h2></center>
<center><h1 style="color:red">This H1 will slide within 6 seconds</h1></center>
<center><button>Click me to slide H1, H2, H3 ,H4</button></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
alert("h4, h3, h2 and h1 will slide one by one!");
$("h4").slideDown("slow");
$("h3").slideDown(2000);
$("h2").slideUp(4000);
$("h1").slideUp(6000);
});
});
</script>
</body>
</html>
JQuery Tutorial for Beginners with Examples Step by Step
How to use JQuery Hide and Show event?
To hide an element or to show the hidden element, see the example bellow :-
<html>
<head><title>JQuery Hide and Show Event</title></head>
<body>
<center><h1>Hide Me Plse</h1></center>
<center><button id="b1">Hide</button></center><br>
<center><button id="b2">Show</button></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#b1").click(function()
{
alert("h1 heading will disappear!");
$("h1").hide();
});
$("#b2").click(function()
{
alert("h1 heading will appear!");
$("h1").show();
});
});
</script>
</body>
</html>
Single button will be used for both hide and show an HTML element, To toggle an element, see the example bellow :-
<html>
<head><title>JQuery Toggle Event</title></head>
<body>
<center><h1>Toggle Me Plse</h1></center>
<center><button>Toggle</button></center>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
alert("h1 heading will toggle!");
$("h1").toggle();
});
});
</script>
</body>
</html>
JQuery Tutorial for Beginners with Examples Step by Step
What is JQuery Animations?
The JQuery animate() method is used to create custom animations. We needs CSS parameters to animate object and elements, see the example bellow :-
<html>
<head><title>JQuery Animate Method</title></head>
<body>
<center>We must specify the position of the element either relative or absolute</center>
<center><h1 style="position:relative">Animate Me Please</h1></center>
<center><button id="b1">Left</button></center><br>
<center><button id="b2">Right</button></center><br>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#b1").click(function()
{
alert("h1 heading will move left!");
$("h1").animate({left: '400px'});
});
$("#b2").click(function()
{
alert("h1 heading will move right!");
$("h1").animate({right: '400px'});
});
});
</script>
</body>
</html>
JQuery Tutorial for Beginners with Examples Step by Step
How to use JQuery callback parameter?
The example below has a callback parameter of a function that will call after completing the hide effect.
<html>
<head><title>JQuery callback parameter</title></head>
<body>
<center><h1>Call Me Back Please</h1></center>
<center><button>Callback</button></center><br>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
alert("h1 heading will show again after being hide at once!");
$("h1").hide("slow", function(){$("h1").show();
});
});
});
</script>
</body>
</html>
The example below has a Chaining function that :-
<html>
<head><title>JQuery Chaining function</title></head>
<body>
<center><h1>Chaining function</h1></center>
<center><button>Click for Chaining Action</button></center><br>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$("h1").css("color", "green").slideDown(3000).slideUp(3000);
});
});
</script>
</body>
</html>
JQuery Tutorial for Beginners with Examples Step by Step
How to Get Content text(), html(), and val()?
How to get content with the jQuery text(), and html() and val(). See the example bellow :-
<html>
<head><title>JQuery Set and Get text method</title></head>
<body>
<center>
<div>
<label>Name </label>
<input id="text" style="text-align:center" type="text">
<button>Show</button>
<h1 id="set">Set text</h1>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
if ($("#text").val()!="")
{
$("#set").text($("#text").val());
alert("Hello " + $("#set").html() + " is every thing fine for you!!!");
}
else
{
alert("Write your name!!!");
$("#set").text("Set text");
}
});
});
</script>
</div>
</center>
</body>
</html>
