jQuery quick start

Standard

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>

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s