JQuery is a JavaScript library which is small, quick, with tons of features that makes things such as animation, event handling and manipulation in web browser easy to use and handle. It works on concept of “write less, do more”. The main aim of jQuery is to make use of JavaScript easily on your site. In recent days jQuery has become most flavored framework of JavaScript which is used by lot of web designers.
It has seriously changed the techniques of writing JavaScript code. Almost 60% of websites uses JQuery including Google, Mozilla, Adobe, WordPress, and lot of famous names. JQuery is a library of JavaScript which has hundreds of prebuild functions. We just have to call that functions. In this post we will be discussing on top 10 and important functions of jQuery. Let’s get started.
1) hide function
This function can hide the selected html element in a simple way. Just call the function and go on.
<script>
// We have to use hide function to hide the element as well.
$(‘#hide_elem’).click(function(){
$(‘#elem’).hide();
});
// This is the actual function which show how to call show function.
$(‘#show_elem’).click(function(){
$(‘#elem’).show();
});
</script>
<div id=”hide_elem”></div>
<div id=”show_elem”></div>
<div id=”elem”></div>
In this example, we’ve created a hide function to hide the selected element.
We’ve created three div tags for this purpose.
Below is the First one, the div tag where we have to click for hiding the element.
<div id=”hide_elem”></div>
And the second one div tag is the main element which hides when we click on hide_elem.
2) Show function
This functions works in the opposite way of hide function. It can show any html element. But before calling this function we must use the hide function on the same element. Because we can’t use show function on the element which displays already. The example clearly showing that how to use both of them on the same element.
<script>
// We have to use hide function to hide the element as well.
$(‘#hide_elem’).click(function(){
$(‘#elem’).hide();
});
// This is the actual function which show how to call show function.
$(‘#show_elem’).click(function(){
$(‘#elem’).show();
});
</script>
<div id=”hide_elem”></div>
<div id=”show_elem”></div>
<div id=”elem”></div>
First div tag which is shown below is where we have to click for hiding the element.
<div id=”hide_elem”></div>
Second one div tag calls the show function given below which shows our hidden element.
<div id=”show_elem”></div>
And the third div tag is the main element which shows when we click on show_elem and hides when we clicks on hide_elem.
3) Toggle function
Toggle function is used to hide or show the specific selected element. This function can perform both functions, show function and hide function by using a single element. It will be a good choice when we want our users to give both, showing and hiding controls for the selected element.
<script>
// toggle function can hide and show the specific element.
$(‘#toggle_elem’).click(function(){
$(‘#elem’).toggle();
});
</script>
<div id=”toggle_elem”></div>
<div id=”elem”></div>
In the above example, we just created a program with toggling capabilities.
If user want to show
<div id=”elem”></div>
Then he need to click on
<div id=”toggle_elem”></div>
If user need to hide that element then, he just need to click on the again, and it’ll hide if shown before.
<div id=”toggle_elem”></div>
4) slideUp function
This function can also can hide our html element but in a different and cool way. It slides the selected elements up and removes it’s slowly. In fact, we can control its speed of sliding as well.
<script>
// slideUp function can hide the selected element in a slow and cool way.
$(‘#slideUp_elem’).click(function(){
$(‘#elem’).slideUp();
});
</script>
<div id=”slideUp_elem”></div>
<div id=”elem”></div>
In the above example, we just created a program which can hide the selected html element. $(‘#elem’).slideUp();
Whenever this function called, The selected element ‘#elem’ will be slided up ‘slideUp()’.
5) slideDown function
slideDown function can show the selected element. It works in the same way as show function works but it shows the selected element in a more efficient way. It slides down the selected element to show that.
<script>
// slideDown function can show the selected element in a slow and cool way.
$(‘#slideDown_elem’).click(function(){
$(‘#elem’).slideDown();
});
</script>
<div id=”slideDown_elem”></div>
In the above example, we just created a program which can show the selected html element. $(‘#elem’).slideDown();
Whenever this function called, The selected element ‘#elem’ will be slided Down by using the function ‘slideDown()’.
6) slideToggle function
slideToggle function toggles the selected element into to slideUp or slideDown. slideToggle function can do both actions like hide and show the selected html element in the sliding way.
<script>
// slideToggle function can show the selected element in a slow and cool way.
$(‘#slideToggle_elem’).click(function(){
$(‘#elem’).slideToggle ();
});
</script>
<div id=”slideToggle_elem”></div>
In the above example, we just created a program which can Toggle the slide function into up or down to the selected html element. $(‘#elem’).slideToggle();
Whenever this function called, The selected element ‘#elem’ will be slided up or slided down just because of this function ‘slideToggle()’.
7) fadeOut function
fadeOut function hides the selected HTML element by fading out slowly like animation.
<script>
// fadeOut function can hide the selected element in a slow and cool way.
$(‘#fadeOut_elem’).click(function(){
$(‘#elem’).fadeOut ();
});
</script>
<div id=”fadeOut_elem”></div>
<div id=”elem”></div>
In the above example, we programmed a script which can hide the selected html element. $(‘#elem’).fadeOut();
The selected HTML element will be faded whenever this is function called.
8) fadeIn function
fadeIn function work in the opposite way of fadeOut function because it shows the selected HTML element by fading in slowly like animation.
<script>
// fadeIn function can show the selected element in a slow and cool way.
$(‘#fadeIn_elem’).click(function(){
$(‘#elem’).fadeIn ();
});
</script>
<div id=”fadeIn_elem”></div>
<div id=”elem”></div>
This example demonstrates how to create a program which can show the selected html element in the way of fading. $(‘#elem’).fadeIn();
If we call this function, The selected element ‘#elem’ will be faded in by the function ‘fadeIn()’.
9) fadeToggle
fadeToggle function can toggle fadeIn into fadeout or fadeout into fadeIn. It works in the same way like other toggle functions.
<script>
// fadeToggle function can show the selected element in a slow and cool way.
$(‘#fadeToggle_elem’).click(function(){
$(‘#elem’).fadeToggle ();
});
</script>
<div id=”fadeToggle_elem”></div>
<div id=”elem”></div>
This example teaches you how to create a program which can show the selected html element in the way of fading. $(‘#elem’).fadeToggle();
If we call this function, The selected element ‘#elem’ will be toggled into faded in or faded out by the function ‘fadeToggle()’.
10) Animate function
Animate function is a really interesting function in jQuery because we can animate any of our html element by using this function. Actually we can implement CSS to the selected HTML element in an animated way.
There’s a script where we converted a simple HTML tag into a CSS animated tag.
<script>
// fadeToggle function can show the selected element in a slow and cool way.
$(‘#animate_elem’).click(function(){
$(‘#elem’).animate ({color: blue, opacity: 0.6}, 1000);
});
</script>
<div id=”animate_elem”></div>
<div id=”elem”></div>
In this example, a simple div tag converts into an animated blue colored tag which has a light opacity.
.animate(); is a function but its incomplete without the {} braces which is inside its () brackets. .animate({});
In the {} braces, we have to insert some CSS properties and their values to convert our simple tag into an animated tag. .animate ({color: blue, opacity: 0.6}
Insert a : (colon) between a CSS property and its value, and if you need to insert another CSS property, so insert a , (comma) and insert another property and value like before and insert another ,(comma) if you need some more and so on.
After the curly braces, we have to give a duration to our animation to run out. For this, insert a comma and put the time duration of the animation as per you required. We have to put the duration in milliseconds. Means, if we insert 1000 so it’s actually 1 second, if we insert 1500 then it will be 1.5 second and so on…
$(‘#elem’).animate ({color: blue, opacity: 0.6}, 1000);
Thus we have seen how to use these top 10 functions in jQuery. Also please let us know your experience in using these 10 functions by commenting below. Catch you in next tutorial, till them keep learning.
