Instructables
Picture of Jquery Basics
Introduction about Jquery

What is Jquery?
Jquery is JavaScript library..
Jquery is very easy to learn and understand its simplified functions.


Here's a simple example of Jquery.

Code:
$(document).ready(function(){
$('button').click(function(){
$('button').hide();
});
});

So when we click button, it disappers.. And you thought it would be hard.
I got many examples and very simple tutorial on jquery start now!

If you got any doubt or idea, create forum on www.coderszone.in
 
Remove these adsRemove these ads by Signing Up

Step 1: Install jquery library

So, In this part we will learn how to include Jquery library!
Their are two diffrent methods
a)Include Jquery CDN form, google. 
b)Download Jquery library and include its link..
Don't get confused..
We use < script >  tag, to add library link..
Here how we include a CDN link..

<html>
<head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
</head>
</html>


Note, CDN link needs constant internet connection.

Therefore I recommend to download Jquery library from jquery.com
And then include the library..

<html>
<head>
<script src='jquery.min.js'></script>
</head>
</html>


Note give the library name properly, in my case I have given library name jquery.min.js, as I have renamed it..

Step 2: Jquery syntax

Picture of Jquery syntax
So lets learn about jquery syntax
A jquery function always starts with an event,
For now we are using document ready event

$(document).ready(function(){

});


So what does this event do is, it prevents any code from running, until document is fully loaded..
Now we have to include all our functions inside this event..

A jquery function's basic syntax is, $(selector).action();
1) Note every jquery syntax should start with sign '$' and end with a semiconal ';'
2) Selector must be replaced with html elements to perform action.

Examples

$('p').show();
$('div').hide();


Note you can also select HTML elements by CSS selectors, such as class and id's

For example

$('.panel').slideUp();
$('#panel2').show();


So here's full jquery syntax

<html>
<head>
<script src='jquery.min.js'></script>
<script>
   $(document).ready(function(){
    //jquery functions goes here
});
</script>
</head>
</html>