Thank you for stopping by. This jQuery guide is interactive and only works on Desktop browsers (you'll be using your JS console).

Learning jQuery with Street Fighter and Hadoukens

Created by Carl Sednaoui, open sourced on GitHub.

Through this interactive guide you'll gain a basic understanding of jQuery and how to use it on your own projects. You'll learn to select elements, modify them and we'll even get to use some really cool jQuery animations.

To get through this guide you'll need a basic understanding of HTML, CSS and CSS selectors. If you'd like a refresher on these topics you can use Shay's intro to CSS & HTML.

Disclosure: This guide uses Ryu from Street Fighter and his world-famous Hadoukens. As you can imagine, both Ryu and his Hadoukens are trademarks of Capcom.

Ready? Let's dive in!

What is jQuery

As said on jQuery.com: "jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling..."

Here's another way to put it: jQuery is a powerful JavaScript library that works in all browsers, and enables you to write much less code than you otherwise would with plain JavaScript.

Time to Get Our Hands Dirty

In this guide we'll be using Google Chrome's console. Yes, you can use any browser you like but I strongly recommend you switch to Chrome to follow along. If you don't have Chrome, you can download it here.

Opening Chrome's Console

Google Chrome gives you access to this thing called the "console". The console allows you to write JavaScript (and, in our case, jQuery) and see the results right away. Here's how to open the console:

Here's what your console should look like (you may or may not have error messages, don't worry about those).

Selecting an Element with jQuery

To select the green box below, simply type this in your console then press "enter": (yes yes, you need to follow along)

$('#green-box')

Here's what just happened:

You should see something like this, meaning that the element we're selecting is a <div> with an ID of 'green-box'.

Using the jQuery API

Side note: In the context of jQuery, the API is simply a list of all the things you can do with jQuery. Here's a link to the full API.

Now that you know how to select an element, let's go ahead and change the color of our square. How about a nice LightSkyBlue color? (That's the name of the CSS color.) In order to do this we will use jQuery's CSS API. Here's what you need to type:

$('#green-box').css('background-color','lightskyblue')

Can you guess what just happened?

Protip: You can use the "up" arrow in your console to get the last command you typed. This will save you tons of time.

Protip dos: Even though you can copy/ paste the sample code provided, I strongly suggest you actually type things out. This will help you learn wayyy more. I Promise.

Let's now change the border color to a nice steelblue color. Can you guess how to do this?

$('#green-box').css('border-color','steelblue')

We basically used the same command as above, but instead of changing the background-color we changed the border-color.

Actually, how about we remove the background color altogether by setting it to 'transparent'?

$('#green-box').css('background-color','transparent')

Are you getting the hang of it? See, not as hard as you thought :)

Ready for something amazing? Let's add a hadouken inside our transparent box.

We have a hadouken image conveniently saved at http://i.imgur.com/8NArGWZ.gif. To add this image to our box we'll use an HTML image tag to create the image and use jQuery's HTML API to add the image.

Here's how to do this (feel free to just copy/ paste image URLs):

$('#green-box').html('<img src="http://i.imgur.com/8NArGWZ.gif" />')

Note: Notice that we're using double quotes "" for the image src, that's because we're nesting them.

Another way to add the hadouken would be to use jQuery's Append API.

$('#green-box').append('<img src="http://i.imgur.com/8NArGWZ.gif" />')

Extra credit: Can you guess what happens if you run the 'append' command several times? Now try running the 'html' one several times. I'll let you play with this for a minute...

Protip: Remember that you can use the "up" arrow in your console to go back to a previous command.

...

...

...

Were you able to spot the difference? If you're about to say that the 'append' command keeps on appending hadoukens forever while the 'html' command replaces everything with only 1 hadouken you'd be 100% right!

Here's what you learned in this section:

  • How to select an element with jQuery.
  • How to use jQuery's CSS API to change the background and border color of an HTML element.
  • How to change the HTML content of an element.
  • How to append HTML to an element.

Your First jQuery Project

You now have a basic understanding of jQuery. How about we deepen your jQuery chops by working on a small project together? Here's what I propose: Let's make Ryu fire a hadouken.

This is what our end project will look like. (Make sure you hover on Ryu and also click on him :)

Add Hadouken sound

Getting Started with Our Project

Here's what we need to achieve this project:

Luckily for you, I've created an empty <div> below with an ID of 'my-div' (pardon the lack of originality). You already know how to select this div, don't know? Here's the code just in case:

$('#my-div')

You should see this in your console:

Adding Ryu at a Stand Still

Now that we know we can select our <div>, let's add Ryu at a stand still. The image you need is available here: http://i.imgur.com/90Mmdcm.png

$('#my-div').append('<img src="http://i.imgur.com/90Mmdcm.png">')

Side note: You'll notice that our last line of code has a little "▶". This means that there's more details hidden. If you click on that icon you should see the <div> expand, which will reveal our newly added image:

Adding our Animated Ryu

When a user hover's over Ryu, we want to animate him as if he was ready to fight. Here is the gif we'll need: http://i.imgur.com/nTj3Fxx.gif. To achieve this we'll use jQuery's Hover API, which can take 1 or 2 functions. Functions you say? What is THAT? Well... a function is basically a block of code (or logic) you want to execute.

Just a second ago I mentioned that jQuery's Hover API can take 1 or 2 functions here's the difference:

In our example, now we'll need to use 2 functions. The first function will change Ryu from a stand still position to an animated one when somebody hovers over him. The second function (which will run when the user stops hovering over the image) will change Ryu from an animated position back to a stand still one.

Below's the code you need to run.

Quick note: Since you're using your console, it's easier to type all this code in one long line. But, if you prefer to use several lines, you can also hit "option" + "enter" on a Mac to get a new line. Once you're done typing everything hit "enter".

$('#my-div img').hover( function() {
    this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
    this.src = 'http://i.imgur.com/90Mmdcm.png'
})

If your code doesn't work, don't panic. Make sure to pay close attention to the syntax, it's really easy to make typos. Also, I've included a checkpoint a few scrolls down.

Let's go over what's happening in the above block of code.

If you hover over Ryu now he should start jumping up and down.

Checkpoint: Here's all the code we've entered so far. Feel free to copy/ paste this in your console if you get stuck or need to refresh the page.

$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').hover( function() {
    this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
    this.src = 'http://i.imgur.com/90Mmdcm.png'
})

Protip: If you typed the wrong command and don't know how to undo what you did, you can simply refresh this page and start from any of the checkpoints provided.

Side note: It's totally ok to feel slightly confused right now. If you keep reading this guide you'll get the hang of it. We still have a bit more to do, giving us plenty of time to practice. Here's what coming next:

The Hadouken Pose

We now want to change Ryu's pose when someone clicks on him. To do this we'll use jQuery's Mousedown API. Mousedown only takes 1 function which gets triggered whenever somebody clicks on the desired element. Here's how to use it:

$('#my-div img').mousedown( function() {
    this.src = 'http://i.imgur.com/Rfj0a80.png' 
})

And here's what's happening:

Checkpoint: Here's all the code we've entered so far. Feel free to copy/ paste this in your console if you get stuck or need to refresh the page.

$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').hover( function() {
    this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
    this.src = 'http://i.imgur.com/90Mmdcm.png'
})
$('#my-div img').mousedown( function() {
    this.src = 'http://i.imgur.com/Rfj0a80.png' 
})

Adding The Hadouken

Let's add the Hadouken, which is available at http://i.imgur.com/oTyQRvX.gif.

This will be similar to what we did above, but instead of changing the source of an image we will be appending an element next to Ryu. The element we're appending is an image, with a class of 'demo-hadouken'. Adding this class ensures that the Hadouken is aligned with Ryu's hands (I've taken care of the CSS for you).

$('#my-div img').mousedown(function() {
    $('#my-div').append(
    '<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
    );
})

Protip: This is the second mousedown event we're adding to '#my-div img'. These events will run in the order in which they were added.

And here's what's happening:

Checkpoint: Here's all the code we've entered so far. Feel free to copy/ paste this in your console if you get stuck or need to refresh the page.

$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').hover( function() {
    this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
    this.src = 'http://i.imgur.com/90Mmdcm.png'
})
$('#my-div img').mousedown( function() {
    this.src = 'http://i.imgur.com/Rfj0a80.png' 
})
$('#my-div img').mousedown(function() {
    $('#my-div').append(
    '<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
    );
})

Animating The Hadouken

It's that moment we've all been waiting for... time to make the Hadouken move! For this we'll use jQuery's Animate API.

$('#my-div img').mousedown(function() {
    $('.demo-hadouken').animate( {
        "margin-left": "600px"
    }, 1000, 'swing', function() {
        this.remove();
    })
})

And here's what's happening:

Checkpoint: Here's all the code we've entered so far. Feel free to copy/ paste this in your console if you get stuck or need to refresh the page.

$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').hover( function() {
    this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
    this.src = 'http://i.imgur.com/90Mmdcm.png'
})
$('#my-div img').mousedown( function() {
    this.src = 'http://i.imgur.com/Rfj0a80.png' 
})
$('#my-div img').mousedown(function() {
    $('#my-div').append(
    '<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
    );
})
$('#my-div img').mousedown(function() {
    $('.demo-hadouken').animate( {
        "margin-left": "600px"
    }, 1000, 'swing', function() {
        this.remove();
    })
})

Getting Ryu Out of The Hadouken Pose

We're almost done! The last thing we'll want to do is make sure that Ryu goes back into his fighting pose after firing the Hadouken. For this we'll use jQuery's Mouseup API.

$('#my-div img').mouseup(function() {
    this.src = 'http://i.imgur.com/90Mmdcm.png'
})

And here's what's happening:

Final checkpoint: Here's all the code we've written!

$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').hover( function() {
    this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
    this.src = 'http://i.imgur.com/90Mmdcm.png'
})
$('#my-div img').mousedown( function() {
    this.src = 'http://i.imgur.com/Rfj0a80.png' 
})
$('#my-div img').mousedown(function() {
    $('#my-div').append(
    '<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
    );
})
$('#my-div img').mousedown(function() {
    $('.demo-hadouken').animate( {
        "margin-left": "600px"
    }, 1000, 'swing', function() {
        this.remove();
    })
})
$('#my-div img').mouseup(function() {
    this.src = 'http://i.imgur.com/90Mmdcm.png'
})

Extra Credit

If you click on Ryu 100 times really fast you'll notice that Hadoukens start firing everywhere. While this looks really cool, this is an unintended effect which is happening because we're not removing existing Hadoukens before adding new ones. To fix this we need to enter the code below BEFORE we fire new Hadoukens.

Note: Just adding the code below will make Ryu STOP firing Hadoukens. That's because our events are in the WRONG order. Take a look at the following section, where everything is happening in the right order.

$('#my-div img').mousedown(function() {
    $('.demo-hadouken').remove();
})

The Full Code

$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').hover( function() {
    this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
    this.src = 'http://i.imgur.com/90Mmdcm.png'
})
$('#my-div img').mousedown( function() {
    this.src = 'http://i.imgur.com/Rfj0a80.png' 
})
$('#my-div img').mousedown(function() {
    $('.demo-hadouken').remove();
})
$('#my-div img').mousedown(function() {
    $('#my-div').append(
    '<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
    );
})
$('#my-div img').mousedown(function() {
    $('.demo-hadouken').animate( {
        "margin-left": "600px"
    }, 1000, 'swing', function() {
        this.remove();
    })
})
$('#my-div img').mouseup(function() {
    this.src = 'http://i.imgur.com/90Mmdcm.png'
})

Thank you so much for reading this guide, I hope you had as much fun as I did. If you want to add the Hadouken sound feel free to dive into Thinkful's HTML5 Audio Guide. Oh, and if you're looking to join a bootcamp, check out Thinkful's Bootcamp Finder.

Appendix

How to install jQuery?

The easiest way to install jQuery is to grab the code from Google. Here is the code snippet:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Note: Notice that there's no "http:" or "https:" before the "//" in the src of the tag. This ensures that both HTTP and HTTPS pages can load this code. If you're coding locally on your computer you'll need to add "http:" to the beginning of the src to make sure jQuery loads. Here's what your script should look like:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

You can now create a basic html file and add the jQuery script inside the <head> tag. In the example below we also added a JavaScript file called 'example.js', this is where we would hypothetically write our jQuery code.

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="example.js"></script>
    </head>
    <body>
        <!-- Your content goes here -->
    </body>
</html>

Note: You'll want to make sure to only use jQuery once your DOM is ready. Don't worry if this sounds abstract and confusing, here's an explanation and how to achieve this.

Author: