jQuery quick start


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:


<script type=”text/javascript” src=”jquery.js”></script>


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”>

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:


<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>


/************** Here is the complete source code ********************/

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<div style="background-color:#f2f2f2; padding:20px; border:1px solid #333;" id="test">
<p >This is another paragraph.</p>
<br />
<button>Click me</button>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s