What is jQuery?
- jQuery is a huge library of JavaScript Functions.
Why jQuery?
You can add cool effects to your web pages such as:
- HTML element manipulation, CSS manipulation, Hide and show boxes, FadeIn & FadeOut effect, Light box popups, Slide in and Slide out boxes and many more…
- Its simple and easy to use…
How to start?
- First thing to start with is to download jQuery file from jQuery.com.
- Now include the file in your html page as follows:
<head>
<script type=”text/javascript” src=”jquery.js”></script>
</head>
Now you are ready to go… lets start with simple examples now
Example 1: Hiding a biv on click by using ” hide() ” function
Following is a simple ” hide() ” function to hide a div or content
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#test”).hide(“slow”);
});
});
</script>
NOTE: With no parameters, the .hide() method is the simplest way to hide an element.
hide(“slow”) where slow is a parameter which will give a slow hiding effect to the div.
Now in the body tag we declare the div as follows:
<body>
<div style=”background-color:#f2f2f2; padding:20px; border:1px solid #333;” id=”test”><p >This is another paragraph.</p></div>
<br /><button>Click me</button>
</body>
/************** Here is the complete source code ********************/
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#test").hide("slow");
});
});
</script>
</head>
<body>
<div style="background-color:#f2f2f2; padding:20px; border:1px solid #333;" id="test">
<p >This is another paragraph.</p>
</div>
<br />
<button>Click me</button>
</body>
</html>
