JQuery is a fast, small and multi-browser JavaScript Library which greatly simplifies Java Script programming. It’s initial release was released on 26th Aug 2006 and it is written in Java Script. It’s easy to learn and the most popular JavaScript library in use today.
It’s syntax is designed to make it easier and to navigate a document, create animations, handle events, and develop Ajax applications.
Following example will explain you how to work with JQuery.
Example of JQuery hide and show method:
Now you can hide and show HTML elements with the hide() and show() methods:
<!DOCTYPE html><html><head><script src=“//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”>script><script>$(document).ready(function(){$(“#hide”).click(function(){$(“h1”).hide();});$(“#show”).click(function(){$(“h1”).show();});});script>head><body><button id=“hide”>Hidebutton><button id=“show”>Showbutton><h1><font color=“green”> This text will appear and disappear with the operation of above button. </font></h1></body></html>
After clicking on Show button, the result will be:
Following example is showing the speed parameter with the hide() method:
<!DOCTYPE html><html><head><script src=“//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”>script><script>$(document).ready(function(){$(“#hide”).click(function(){$(“h1”).hide(1000);});});$(document).ready(function(){$(“#show”).click(function(){$(“h1”).show(1000);});});script>head><body><button id=“hide”>Hidebutton><button id=“show”>Showbutton><h1>First Line</h1><h1>Second Line</h1></body></html>
After clicking on Hide button, the result will look like this:
I hope you liked this article.
