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. |