Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript jQuery Basics (2014) Introduction to jQuery What is jQuery?

JQuery isn't working

<html>

<head>

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

<script src="app.js"></script>

    </head>
<body>

    <div class="para">
    <h2 style="text-align: center;">Osama</h2>
    </div>     

    </body>

</html>

$(".para").hide().show("slow");

i don't understand why code is not working

4 Answers

Julian Gutierrez
Julian Gutierrez
19,201 Points

Ah ok, if you are using an external js file include your js file right before the closing body tag or wrap your code in a document.ready function.

$(document).ready(function(){
    $(".para").hide().show("slow");
});

why including the js file in the head is not working?

Julian Gutierrez
Julian Gutierrez
19,201 Points

Well since your code interacts with the DOM, the part where you target the element with the class .para, you need to make sure that part of the html is loaded before your script targets it. If your script starts looking for a div with the class .para and the browser has not yet loaded that part of the html it will have nothing to hide and show. By placing the script right before the closing body tag or using document.ready you're making sure your html is loaded before your script runs.

Julian Gutierrez
Julian Gutierrez
19,201 Points

If you are trying to include your jquery code in your html code wrap your code with a script tag.

<script>
    $(".para").hide().show("slow");
</script>

no i'm using external js

Thanks

ywang04
ywang04
6,762 Points
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="app.js"></script>

It's better to put these two lines at the end of the body instead of head to avoid loading issue. (JavaScript or jQuery loaded before DOM is ready.