jQuery Basics

Languages of The Web

The visible part of every website is made up of these languages.

HTML: Coding Our Content

CSS: Coding Our Design

JavaScript: Coding Our Interactions

Getting Elements

We can get an element the same way as in CSS,

with its id its class or the element tag type.

var header = $('#pageHeader');
var allPhotos = $('.photo');
var allImages = $('img');

When we find an element, we give it a var name,

so we can do stuff to it later using an easy name.

Changing Elements

Add or remove a class to change how it looks:

var header = $('#pageHeader');
header.addClass('fancyBorder');
header.removeClass('plainBorder');

Change its size and position:

var allPhotos = $('.photo');
allPhotos.width(100);
allPhotos.left(300);

Fade in or fade out:

var allImages = $('img');
allImages.fadeIn();
allImages.fadeOut();

jQuery Basics with Unicorns

Click here to start

Make January Golden

In your JavaScript panel, add the class “gold” to January:

var january = $('#january');
january.addClass('gold');

Challenge:

• February should be orange
• March should be pink
• April should be blue
• The others can be any colour

Make the August Unicorn Smaller

In your JavaScript panel:

var august = $('#august .unicorn');
august.height('40%');

Challenge:

• May should be the same height as August
• March should be 70% of the height of her box

Flying Pegasus Ponies

Create a function containing the code you want to run:

function fly() {
  var unicorn = $(this);
  unicorn.animate({'margin-bottom':'+=15'}, 1000);
  unicorn.animate({'margin-bottom':'-=15'}, 1000, fly);
}

Tell the selected objects when to run the function:

var pegasusPonies = $('.pegasus');
pegasusPonies.click(fly);

Pegasus ponies should now fly when clicked.

June’s Disappearing Trick

Create the turnInvisible function:

function turnInvisible() {
var clickedUnicorn = $(this);
clickedUnicorn.fadeOut();
}

Run the function when June is clicked:

var june = $('#june .unicorn');
june.click( turnInvisible );

June should now disappear when clicked.

Jumping Jacks

Here’s a function to make a unicorn jump:

function jump() {
  var unicorn = $(this);
  unicorn.animate({'margin-bottom': '+=20'}, 300);
  unicorn.animate({'margin-bottom': '-=20'}, 300);
}

Challenge:

Make one of the unicorns jump when the mouseover event happens.

jQuery Basics: Complete!

Great, now it’s time to build our own…

Take me to the next chapter!