Basics of jQuery

Introduction
jQuery is most popular JavaScript library among the other JavaScript libraries.It is light weight and fastest library.It belongs to client side.Lot of people have been using this library.It has lot of job opportunities as well.So we can easily get assist in case of need.

How to start?
 "$" this is the symbol of jQuery.
At first we have to download the jQuery file or use CDN and put it in very first of the page which means add before all other script references.Otherwise it won't work.we can easily find out whether we have properly referred or not by the error message in the console of browser.

"jQuery is not defined" we will get this error message if we didn't refer the library properly.

Once we added the jQuery in our web page then we can start to write other stuffs.

Write all your coding inside of the below statement

<Script type="text/JavaScript">

</Script>

All your code must be inside this block.
In this also we have 2 Parts.
Function should be written on outside of

$(document). ready (function (){

});

All other things should be inside of this block.

What it does,It executes the code after the generation of all HTML files.If you didn't put your code inside $(document). ready () function ,it will search the html controls  before the creation of it.So it can't find the control and can't work.

For instance

<Script type="text/JavaScript">

function test (){
alert ('Welcome to jQuery');
}

$(document). ready (function (){

test ();
});
</Script>

This is the basic structure of jQuery code.
It will display an alert message when open the page.

Lot of things are there.Here I'm going to explain the very basic and important things among that.It will help you to start jQuery.

Controls
Next thing is html controls ,we should know some commonly using controls in html in which we are going to perform operations such as
1.div
2.table
3.Select
4.Input(type like text, radio,checkbox, submit)

The syntax of the above controls are explained here.
<div id='test' class='btn' >click me</div>

<table id='tbltest' class='table'>
<thead>
<tr><th>name</th><th>age</th></tr>
</thead>
<tbody>
<tr><td>ssn</td><td>25</td></tr>
</tbody>

<select  id='ddltest' class='select'>
<option value='1'>hello</option>
</select>

<Input type='text' id='test' class='textbox'  />

All other controls will be like these.

How to perform operations over these controls?
To perform operations over these controls we have to know some basic tactics.

Mostly these controls are  called or accessed  by their ids or classes.for instance.we can be used either of these format.Mostly the second format is considered as better.

ID selector
$('#id name'). event name(function (){

});

or
$('#id name').on( 'event name',function (){

});

Class selector
$('.class name'). event name(function (){

});

or
$('.class name').on( 'event name',function (){

});

Some common jquery event names
1.button-click
2.input text- blur,focus,change,keypress
3.input radio or checkbox- checked
4.select - change
5.table -click(tr,td)

Some common jquery examples

1.Using div

<Script type="text/JavaScript">

function test (){
alert ('Welcome to jQuery');
}

$(document). ready (function (){

$('#test'). click(function (){
test ();
});

});

</Script>

<div id='test' class='btn' >click me</div>

This will display "welcome to jquery",if you click the div.

1.Using select(drop down)

<Script type="text/JavaScript">

$(document). ready (function (){

$('#ddltest'). change(function (){
alert ($(this).Val());
});

});
</Script>

<select  id='ddltest' class='select'>
<option value='1'>hello</option>
</select>

This will display the selected value of the drop-down.In our case the output will be 1.

I hope this is enough for begin jQuery .I will explain other important jquery tricks in my next article.