Getting Started with jQuery

jquery
javascript

#1

jQuery is the most popular JavaScript library available. It often allows developers to perform common JavaScript functions while using less code. The maintainers of jQuery even call it the “Write Less, Do More JavaScript Library.”

With that in mind, let’s see how developers can get started with jQuery on Cloud9.

Include jQuery

To start, open up a workspace and create an index.html file, pasting the following lines of code into it.

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello world from Cloud9!</title>
    </head>
    
    <body>
        <h1>Hello world!</h1>
        <p class="tagline">From Cloud9 IDE!</p>
        
        <!-- load scripts at the bottom of your page -->
        <script src="site.js"></script>
    </body>
</html>

Preview your new HTML file by clicking Preview > Live Preview File (index.html) to see what we’ve got. This will automatically update when you make changes to the files we talk about in this tutorial.

Create a site.js file (in the same folder as your index.html file) with no code in it yet.

Back in our index.html file, we’ll use the jQuery CDN so copy and paste the following lines near the bottom of the <body> section of your index file. Make sure to paste it just before the line that says <script src="js/site.js"></script>. This will allow us to use jQuery in the site.js file later.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Note: I have linked to jQuery with the URL of //code.jquery.... The preview window loads the page by HTTPS so if you load any scripts by HTTP they probably won’t work unless you change the preview URL to start with http. To avoid this, when loading scripts like this, you may either want to start the URL with // or https.

Add jQuery Functions

Now that we included jQuery before our site.js file, we can start using its functions. Let’s do a little test function just to make sure it worked. In your site.js file, add the following lines of code:

// Any time an element with the class of "tagline" is clicked
$(".tagline").click(function() {
    alert("jQuery works!");
});

Now click Preview > Live Preview File (index.html) to see what we’ve got. When the preview loads, click “From Cloud9 IDE!” in the preview and watch the magic.

Now we’ll explore how jQuery can change the elements of your website. Change the alert code to $("h1").text("jQuery works..."); so your site.js file look like this.

// Any time an element with the class of "tagline" is clicked
$(".tagline").click(function() {
  	// Change elements of the h1 tag so their inner text says "jQuery works..."
    $("h1").text("jQuery works...");
});

Now save that file and with the preview updated, click “From Cloud9 IDE!” once again and you’ll see the change.

So now we’ve seen the very basics of jQuery, from handling certain events (like a click) to changing elements in our HTML, like our <h1> element.

This guide should give you a better idea of how jQuery helps you do more with less code. jQuery also allows developers to hide elements, show elements, add animations, and plenty more. All of the additional functions can be found at the jQuery API.


Tutorials - Table of Contents
#2

Hi there,

I appreciate your thoughts on this. I’ve moved some working code which contains a js file which uses jquery–but not on Cloud 9. The js file is after the jquery library is called.

In the original file, https is used–and I hoped that changing this to http would help, but no luck.

I’m not sure I’m understanding the use of //code.jquery.com in your example.

I don’t think that you’ve downloaded the jquery files so that https doesn’t have to be used, but are accessing in some other fashion. Is that right?

Any help would be appreciated!