jQuery is a JavaScript library that was designed to make manipulation of DOM elements easier. It simplifies the syntax and amount of code required to perform a variety of tasks. It's also the basis for a myriad of other libraries that have been built on top of its functionalities.
Selecting HTML Objects with jQuery
$("#elementid")
$(".classname")
$("tagname")
$(this)
addClass() / removeClass()
Click this to add styles to the middle div.
The appearance of this div will change when adding and removing a CSS class.
Click this to remove styles from the middle div.
$("#addclass").click(function(){
$("#changeclass").addClass("funkystyles");
});
$("#removeclass").click(function(){
$("#changeclass").removeClass("funkystyles");
});
toggleClass()
Click this div to toggle the CSS styles on and off.
$("#toggleclass").click(function(){
$(this).toggleClass("funkystyles");
});
append()
Click this div to add more content at the end of its current content.
$("#append").click(function(){
$(this).append("Here's some more stuff for ya! ");
});
prepend()
Click this div to add more content above its current content.
$("#prepend").click(function(){
$(this).prepend("Here's some more stuff for ya! ");
});
fadeIn() / fadeOut()
Click this to fade in the center div.
Now you see me.
Click this to fade out the center div.
$("#fadein").click(function(){
$("#fadeinout").fadeIn(2000);
});
$("#fadeout").click(function(){
$("#fadeinout").fadeOut(2000);
});
fadeToggle()
Click this to fade in the div on the right.
Now you see me.
$("#fadetogglebutton").click(function(){
$("#fadetoggle").fadeToggle(2000);
});
slideDown() / slideUp()
Click this to slide down the center div.
Now you see me.
Click this to slide up the center div.
$("#slidedown").click(function(){
$("#slideupdown").slideDown(2000);
});
$("#slideup").click(function(){
$("#slideupdown").slideUp(2000);
});
slideToggle()
Click this to slide the div on the right up and down.
Now you see me.
$("#slidetogglebutton").click(function(){
$("#slidetoggle").slideToggle(2000);
});