Jquery makes writing Javascript much easier.You'll find it very similar to CSS and it's browser compatible -- Internet Explorer no more headaches.

Jquery uses the document ready function so the javascript code will not be run until all html elements of your webpage has downloaded. Here's a sample of the document ready function

< script >
$ ( document ). ready ( function (){
$ ( "button" ). click ( function(){
$ ( "p" ) . slideToggle();
});

< /script. >

In the above example a button click will move a paragraph up and down. Now we'll learn more jquery below.
Jquery Method Jquery Code Usage
innerHTML(); document.getElementById
("demo").innerHTML = "Paragraph changed!";
is used to get or set the HTML content of an element.
innertext(); document.getElementById
("demo").innertext = "Paragraph changed!";
is used to get or set the text of an element. Html tags will be ignored
Jquery Chaining $("#p1").css("color", "red")
.slideUp(2000).
slideDown(2000);
Chaining allows us to run multiple jQuery methods (on the same element) with a single statement.
append (); $("p").append("Some appended text."); append() inserts content at the end of selected HTML elements.
prepend (); $("p").prepend(txt1, txt2, txt3); prepend()inserts content at the start of the selected elements.
empty $("button").
click(function(){ $("div").empty(); });
Removes the child elements from the selected element
remove $("#div1").remove(); Removes the selected element (and its child elements)

JQuery Effects

show $("p").show(); Shows the selected elements.
hide $("p").hide(); Hides the selected elements
fadein $("p").fadeIn(); Fades in the selected elements
fadeout $("p").fadeOut(); Fades out the selected elements
fade To $("p").fadeTo(1000, 0.4); Fades in/out the selected elements to a given opacity
slideUp $("p").slideUp(); Slides-up (hides)the selected elements
slidedown $("p").slideDown(); Slides down(hides) the selected elements
slidetoggle $("p").slideToggle(); Toggles between the slideUp() and slideDown() methods

JQuery Css

add class $("p:first")
.addClass("intro");
The addClass() method adds one
remove class $("p").removeClass
("intro");
The removeClass() method removes one or more class names from the selected elements.
has class $("p").has("span") has()returns all elements that matches the specified selector.

JQuery with Ajax -- retrieving data

load $("#div1")
.load("demo_test.txt");
This example loads the demo_text document into the div named 'div1'.
get --requesting data $.get('/data.txt', // url function (data, textStatus, jqXHR) { // success callback alert('status: ' + textStatus + ', data:' + data); }); GET is basically used for just
post --submitting data $("#driver")
.click(function(event){ $.post( "result.php", { name: "Zara" }, function(data) { $('#stage').html(data); } ); });
POST method NEVER caches data, and is often used to send data along with the request.