Just in Love with JQuery ...

//Selector $(document).ready( function(){ //Button with ID = testbutton //# for id $("#testbutton").click //we can select multiple items here too //$("#testbutton,strong").click ( function() { //All div go red $("div").css("background-color", "red"); //All p tags $("p").css("background-color", "red"); //Selecting multiple items $("div, strong, #testbutton").css("background-color", "red"); //Selecting all items $("*").css("background-color", "red"); //Selecting children //Selecting all p elements child of div $("div > p").css("background-color", "red"); //Selecting first child $("div > p:first-child").css("background-color", "red"); //Selecting last child $("div > p:last-child").css("background-color", "red"); //All decendent elements of div $("div p").css("background-color", "red"); $("div strong").css("background-color", "red"); //Select Even/odd elements $("p:even").css("background-color", "red"); $("p:odd").css("background-color", "red"); //Selecting element with a specific class //Say we applied a "selected" item class to some elsements //:::starts wtih . $(".selected").css("background-color", "red"); //Selected a tag with specific class //say div or strong etc $("div.selected").css("background-color", "red"); $("p.selected").css("background-color", "red"); //Selecting the object that brought us here //this is an object that initiated the event $(this).css("background-color", "red"); ////////////////////////////////////////////////////////// //Events $("div").click(function(){}); $("div").mousedown(function(){}); $("div").mouseup(function(){}); $("div").mouseenter(function(){}); $("div").mouseleave(function(){}); //unbinding all events $("div").mouseleave(function(){ $(this).unbind(); }); //unbinding a specific event $("div").mouseleave(function(){ $(this).unbind("mouseleave"); }); //Effects .... $("div").click(function(){ $("div > p").hide(); //Hides immediately //p child of div will decrease in width and height and opacity $("div > p").hide(1000); //1000 millisecond for transation... 1 second }); $("div > p").toggle(1000); //hides or shows $("div > p").slideUp(1000); $("div > p").slideDown(1000); $("div > p").slideToggle(1000); $("div > p").fadeOut(1000); $("div > p").fadeIn(1000); $("div > p").fadeToggle(1000); //Don't hide the element... just decrease / increase the opacity $("div > p").fadeTo(1000,0.3); //Delay method can be used to delay the animation... animation start after the specified amount of time $("div > p").delay(1000).slideUp(1000); //Animation End/finish event //this done by providing a callback funtion to animation function $("div > p").slideUp(1000 , function() { //Now hide the parent $("div").hide(1000); } ); //Using animate method //All properties with numaric values cab be put here $("div > p").animate({ "font-size":"3em", //Keep animation untill font size reaches to 3em "width":"50%", "left":"100px" },1000 ); //incrementing progressively $("div > p").animate({ "font-size":"3em", //Keep animation untill font size reaches to 3em "width":"50%", "left":"+=100px" ////////Means always add 100px to the left //"left":"-=100px" or decrease it },1000 ); //// Amimate with Toggle $("div > p").animate({ "font-size":"show" },1000 ); $("div > p").animate({ "font-size":"hide" },1000 ); $("div > p").animate({ "font-size":"toggle" },1000 ); //CSS... setting values of multiple attributes //single $("p").css("background-color", "red"); //multiple $("p").css( {"background-color":"red","left":"+=10"} ); //Applying a css class $("p").addCladd("selected"); //Applying multiple CSS classes $("p").addCladd("selected underlinestyle"); //Remove all css class $("p").removeClass(); //remove one or more css class $("p").removeClass("selected"); $("p").removeClass("selected underlinestyle"); //remove and add in one line $("p").removeClass("selected").addClass("underlinestyle"); //Toggle class $("p").toggleClass("selected"); //Toggle multiple class $("p").toggleClass("selected underlinestyle"); //Toggle classes that are being already applied $("p").toggleClass(); //HTML elements $(this).text("Clicked"); $("p").text("hello"); //HTML tags doesn't work with text //use html $(this).html("<b>Clicked</b>"); $("div").html("hello <b>you</b>"); //remove all content $("div").empty(); //append some text $("p").append("more text"); //Adding content in the end of the div of the div $("div").append("more text"); //Adding content in the begining of the div $("div").prepend("<p>hellow</p>"); //Adding content after the div $("div").after("<p>hellow</p>"); //Adding content before the div $("div").before("<p>hellow</p>"); //replace the content $("div").replaceWith("<h2>hellow</h2>"); //Changing attributes $("img1").attr("src","floatingball.gif"); //Traversing Elements //Adding to selection //This will also add <p> tags to selection ... $(this).add("p").css("background-color","red"); //Removing/excluding from selection //p.second is p tag with class second applied $("p").not("p.second").css("background-color","red"); //selecting next element $("div").next().css("background-color","red"); //specific next tag //Selects next div only ... not other content $("div").next("div").css("background-color","red"); //Useful one $(this).next() .... $("div").prev().css("background-color","red"); //Got to parent... $("p").parent().. //or $("p").parent("div").css("background-color","red"); //we can also use find to find decendents $("div").find("p").css("background-color","red"); //we can also narrow to first/last element $("p").first().css("background-color","red"); $("p").last().css("background-color","red"); //selecting nth element $("p").eq(1).css("background-color","red"); } ); } );