panicbus
10/8/2013 - 7:11 AM

gistfile1.md

##jQuery

###Basics

  • Little bit of background on jQuery
  • How to include it
  • How to make sure it's included and works
  • How to use the documentation to explore methods (in the course of this class)

###Select elements and add property $('#topsquare').addClass('white-text');

###Creating html elements

var jqSquare = $('#top-square')l
var myPara = $('<p>World</p>');
myPara.appendTo(jqSquare);

###Change items $('pet').addClass('favorite');

$('.pet').each(function() {
  var currentPet = $(this)
    $('<span>!</spean>'). appendTo(currentPet);
    
});
$('<span>!<span>'>.appendTo(currentPet);

###Event Clicks

$('.pet').on('click', function() {
    var currentPet = $(this);
    alert(currentPet.html());
});

$(document).ready();

###Assignments

  • Create a new HTML document and include jQuery; verify that it's been included correctly using the browser console
  • Add a div inside the body and a button below; also, create a css file with a .red class that applies a red background color; write jQuery code that will turn the div red on button click (warning: even though your js might run correctly, if you still don't see the div turning red, make sure it has dimensions!)
  • Add another button that will add an h1 with some pretty text at the top of the body and turn it blue
  • Modify your sinatra movies lab app to write your own detail expander on the movie show page