Trouble getting jQuery to work

Question

I've been experimenting with jQuery on Codecademy, however after downloading the library it does not seem to be working.

I followed these steps:

I downloaded jQuery 1.9.1 from http://jquery.com/download/ (http://code.jquery.com/jquery-1.9.1.min.js more specifically)
I renamed the file jquery.js and placed it in the same source folder as my HTML / script etc.
I linked to it in my HTML file <script src='jquery.js'> </script>
My script which used jQuery does not work. I tried a basic test in order to see if jQuery was working correctly - $(document).ready(function(){ alert("Hello jQuery"); });

Is there something I have missed?

(My code works perfectly well on Codecademy, so I think it is very unlikely to be an issue elsewhere in my program)

Edit 1:

(Full code, for those asking :) )

HTML / jQuery

    <script src='jquery.js'>
        $(document).ready(function() {
            alert("Hello jQuery!"); 
            $('.matchtile').click(function() {
                $(this).fadeTo('slow', 0); 
            });
            $('.button').click(function() {
                fadeIn(); 
            });
        });

        function fadeIn(){
            $('.matchtile').fadeTo('slow', 1); 
        }
    </script> 
    <title></title>
</head>
<body>
    <div class="matchtile"></div>
    <div class="matchtile"></div>
    <div class="matchtile"></div>
    <div class="matchtile"></div>
    <div class="button"></div>
</body>

CSS

.matchtile {
    border-radius: 100%;
    background-color: #FF0000;
    width: 30px;
    height: 30px; 
    margin: 30px; 
}

.button {
    background-color: #663333; 
    width: 30px;
    height: 30px;
    border-radius: 10%; 
    margin: 30px; 
}

be sure to post some code here on SO...it helps get the right answers, quickly :) — Mike H., May 06 '13 at 20:52
Look at your Javascript console - do you have any errors? In Chrome, this CTRL + SHIFT + I — Dan Esparza, May 06 '13 at 20:52
It sounds like you've done the right thing. Please show your actual code - a sample html file that just runs a simple function is short enough to show in full here. — nnnnnn, May 06 '13 at 20:54
I've had problems before with my script path, being in different path than I expected. I'd double check that — GodsCrimeScene, May 06 '13 at 20:54
My index.html, style.css and jquery.js files are all in the same folder. — Eilidh, May 06 '13 at 20:55
"My script which used jQuery does not work" Did you call that script ***after*** the jQuery script? — Dom, May 06 '13 at 20:55
You should include the script on one line, then in another script body have your jquery code — Brock Hensley, May 06 '13 at 20:55
I did originally include the jquery.js script on one line, and then include the jquery code - I placed it together to see if that would help. — Eilidh, May 06 '13 at 20:56
Any script tag with src attribute will just ignore content inside same script tag — A. Wolff, May 06 '13 at 20:57
Aha... Thank you. I did originally have them separately `` followed by ``however it wasn't working. I must have changed something else since then, and then broken it in this new and different way ;) Cheers guys! — Eilidh, May 06 '13 at 20:59
http://stackoverflow.com/questions/1056325/javascript-inline-script-with-src-attribute — Liviu T., May 06 '13 at 21:03

score 2 · Answer 1 · answered May 06 '13 at 20:56

<script src='jquery.js'></script>
<script>
$(document).ready(function() {
        alert("Hello jQuery!"); 
        $('.matchtile').click(function() {
            $(this).fadeTo('slow', 0); 
        });
        $('.button').click(function() {
            fadeIn(); 
        });
    });

    function fadeIn(){
        $('.matchtile').fadeTo('slow', 1); 
    }
</script> 
<title></title>
</head>
<body>
<div class="matchtile"></div>
<div class="matchtile"></div>
<div class="matchtile"></div>
<div class="matchtile"></div>
<div class="button"></div>
</body>

You should explain what you did. – j08691 May 06 '13 at 20:58 — j08691, May 06 '13 at 20:58

score 2 · Accepted Answer · answered May 06 '13 at 20:56

Change:

<script src='jquery.js'>
    $(document).ready(function() {
        alert("Hello jQuery!"); 
        $('.matchtile').click(function() {
            $(this).fadeTo('slow', 0); 
        });
        $('.button').click(function() {
            fadeIn(); 
        });
    });

    function fadeIn(){
        $('.matchtile').fadeTo('slow', 1); 
    }
</script>

to:

<script src='jquery.js'></script>

<script type='text/javascript'>
    $(document).ready(function() {
        alert("Hello jQuery!"); 
        $('.matchtile').click(function() {
            $(this).fadeTo('slow', 0); 
        });
        $('.button').click(function() {
            fadeIn(); 
        });
    });

    function fadeIn(){
        $('.matchtile').fadeTo('slow', 1); 
    }
</script>

Your jQuery code should not be in the same script tag which loads the actual jQuery.js

Or to state the rule in more general terms, a script element can specify a `src` _or_ contain JS directly, but not both. — nnnnnn, May 06 '13 at 21:00
As add one to the answer: When you use inline code inside the `script`tag the src attribute is ignored. That's why linked scripts have the script tag open and closed without anything inside. — RaphaelDDL, May 06 '13 at 21:03

score 0 · Answer 3 · answered May 06 '13 at 21:09

I worked up your same example using Google's hosted version of jQuery, just to eliminate the library location as a potential point of failure. This works just fine, tested locally:

<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            alert("Hello jQuery"); 
        });
    </script>
</head>
<body>
</body>

Trouble getting jQuery to work

3 Answers3