Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Introduction to jQuery Include jQuery in a Project

Posted by Sandy Jones
Sandy Jones
7,854 Points

We've already got our app.js included in our page. The only thing missing is jQuery. Find the CDN hosted jQuery javascri

I went to jQuery.com and scrolled down to jQuery but how do you know what is CDN hosted? I've copied and pasted three different scripts and none are working. Can you help?

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Take Evasive Action</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
  //code.jquery.com/jquery-1.11.3.min.js
  </head>
<body>
    <p class="warning">
      <span>It's A Trap!</span>
    </p>
    <div class="image">
        <img src="img/ackbar.gif">
    </div>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</body>
</html>

3 Answers

Jordan Watson
Jordan Watson
14,738 Points
Jordan Watson
Jordan Watson
14,738 Points

From what I can see from your code you are running your app.js code before jQuery. This means the DOM reads your script first and then jQuery but you are relying on jQuery for your Script to work.

Your jQuery should always be linked above your app.js script

<!DOCTYPE html>
<html>
<head>
    <title>Take Evasive Action</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
  //code.jquery.com/jquery-1.11.3.min.js
  </head>
<body>
    <p class="warning">
      <span>It's A Trap!</span>
    </p>
    <div class="image">
        <img src="img/ackbar.gif">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>
Steven Treadway
Steven Treadway
10,037 Points
Steven Treadway
Steven Treadway
10,037 Points

Just google jQuery cdn, click on the first link, pick which version you want (shouldn't matter here), then copy the url and paste it in a script tag.

Sandy Jones
Sandy Jones
7,854 Points
Sandy Jones
Sandy Jones
7,854 Points

Thanks all!