Week 9:

jQuery Basics



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

$("#fadetogglebutton").click(function(){
    $("#fadetoggle").fadeToggle(2000);
});

slideDown() / slideUp()

Click this to slide down the center div.
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.

$("#slidetogglebutton").click(function(){
    $("#slidetoggle").slideToggle(2000);
});

Resources