How to use Jquery

!DOCTYPE html>
html lang="en">
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8">
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">/script>
script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});

/script>
/head>
body>
a href="http://jquery.com/">jQuery/a>
/body>
/html>

Launching Code on Document Ready 

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

To do this, we register a ready event for the document.

$(document).ready(function() {
   // do stuff when DOM is ready
 });

Set value to div and take value from div

Usually selected elements are acted on by other JQuery functions:

var myValue = $('#myDivId').val();    // get the value of an element

$('#myDivId').val("hello world");     // set the value of an element

How do I test whether an element has a particular class?

(Sometimes also: Does jQuery have a hasClass method?)

• You can use the is() method along with an appropriate selector

if ( $('#myDiv').is('.pretty') )
$('#myDiv').show();

Note that this method allows you to test for other things as well. For example, you can test whether an element is hidden (by using the custom :hidden selector):

if ( $('#myDiv').is(':hidden') )
$('#myDiv').show();

How do I test whether an element exists?

• You can use the length property of the jQuery collection returned by your selector:

if ( $('#myDiv').length )
$('#myDiv').show();

How do I determine the state of a toggled element?

You can check the state using the :visible or :hidden selectors.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

How do I disable/enable an element?

You can disable/enable an element by setting the 'disabled' attribute to 'disabled' (to disable it) or "" (to enable it). The result of which looks something like this:
// Disable #x
$("#x").attr("disabled","disabled");
Enable #x
$("#x").removeAttr("disabled");

and here's the source code to the demo: 

select id="x" style="width:200px;">
option>one/option>
option>two/option>
/select>
input type="button" value="Disable" onclick="$('#x').attr('disabled','disabled')"/>
input type="button" value="Enable" onclick="$('#x').removeAttr('disabled')"/>

How do I check/uncheck an input?

You can check/uncheck an element by setting the 'checked' attribute to 'checked' (to check it) or "" (to uncheck it). The result of which looks something like this:
// Check #x
$("#c").attr("checked", "checked");
// Uncheck #x
$("#c").removeAttr("checked");

How do I get the text value of a selected option?

Select elements typically have two values that you want to access. First there's the value, which is easy:
$("select#myselect").val(); // => 1
Next is getting the textual value of a select. For example, if you had the following select box:
select id="myselect">
option value="1">Mr/option>
option value="2">Mrs/option>
option value="3">Ms/option>
option value="4">Dr/option>
option value="5">haseeb/option>
/select>
And you wanted to get the string "Mr" if the first option was selected (instead of just "1"). You would do that in the following way:
$("#myselect option:selected").text(); // => "Mr"

How do I get and use the server response from an AJAX request?

The 'A' in AJAX stands for asynchronous. When invoking functions that have asynchronous behavior you must provide a callback function to capture the desired result. This is especially important with AJAX in the browser because when a remote request is made, it is indeterminate when (or even if) the response will be received.
The following snippet shows an example of making an AJAX call and alerting the response (or error):
$.ajax({
url: 'myPage.php',
success: function(response)
{ alert(response); },
error: function(xhr)
{ alert('Error! Status = ' + xhr.status); } });
But how can the response be used in context of a function? Consider this flawed example where we try to update some status information on the page:
function updateStatus()
{ var status;
$.ajax({ url: 'getStatus.php', success: function(response)
{ status = response; }
});
// update status element? this will not work as expected $('#status').html(status); }

Why do my events stop working after an AJAX request?

Frequently, when you've added a click (or other event) handler to all links using $('a').click(fn) you'll find that the events no longer work after you've loaded new content into a page using an AJAX request.

When you call $('a') it returns all the links on the page at the time and .click(fn) adds your handler to each individual element. When new links are added, they are unaffected. See the AJAX and Events Tutorial for longer discussion.

You have two ways of handling this:

[edit]

Re-binding

This method implicates calling the method .bind() on the new added elements, as they are loaded/added. For example:
$('a').click(fn);
$('#mydiv').load('my.html',
function()
{ $('a').click(fn);
});

• This code selects an element with a class of "myCssClass". Since any number of elements can have the same class, this expression will select any number of elements.

  $('.myCssClass')

Another task you often face is to call methods on DOM elements that are not covered by jQuery. Think of a form you would like to reset after you submitted it successfully via AJAX.
$(document).ready(
function()
{ // use this to reset a single form
$("#reset").click(function()
{ $("form")[0].reset(); });
});

$("div.contentToChange p.firstparagraph:hidden").slideDown("slow");
$("div.contentToChange p.firstparagraph:visible").slideUp("slow");