Uncaught ReferenceError: $ is not defined

Question 1

The solution:

1) Use Google CDN to load jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

2) As far as I know about the Cycle Plugin, It is compatible with jQuery v1.5-v1.7 because most of the methods were deprecated in jQuery 1.8+ . This is the reason I've used v1.5 of Google CDN jquery in point 1. Most of the examples on cycle plugin use jquery 1.5.

3) Clear Your browser cache, It is the main culprit most of the times.

4) PLease check the loading of jquery using the code below

if(typeof jQuery!=='undefined'){
    console.log('jQuery Loaded');
}
else{
    console.log('not loaded yet');
}

Major Edit:

The reason for the error is fairly simple:

You have called the cycle method before the jquery is loaded.

call cycle plugin on DOM ready..

$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });  
});

Question 2

2 issues.

Looks like your jQuery was not loaded properly.

You generally see this error

Uncaught ReferenceError:$ is not defined

when jQuery was not properly included on your page.

Try using jQuery from CDN and it should solve your problem

Replace

<script src="JS/jquery-1.10.1.min.js"></script>

with the one from cdn

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

NOTE: if you test from file system, you need to add the http: to the above URL or it will fail

Next your script file is before the HTML . So need to contain the code in DOM Ready handler.

$(function() {
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 
        next:   '#next', 
        prev:   '#prev' 
    });
});

As far as I know 'Slider' was referenced when I created the div Id.

No it is not. If your script was included just before the body , then you may not enclose it in the Ready handler. But in your case it is present in the head. So when the script starts running that particular element is still not present in the DOM

Check Fiddle

Question 3

There might be two issues:

1) The JQuery might not have got loaded properly. You could test it using Chrome. Key in $ or jQuery to check if it is loaded properly. Chrome Console

2) This is based on my experience in some JQuery.js which would have got bundled with other JS libraries, where $ will not be supported and you are forced to use jQuery instead of $ Check out for the below line in the js file that you have loaded in your project.

window.jQuery = window.$ = jQuery;

I see that by using http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js didn't work for me but I used http://code.jquery.com/jquery-1.7.2.min.js

Below is the only part in your code that I edited and it started working fine for me.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Question 4

As an addition. If you are using $(Jquery) in your .js file. Logically all libs or frameworks should be before that .js file.

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>

Question 5

I had this problem but the cause was very different to scenarios reported above. My site was working everywhere except on my older Android (2.2). Turned out this device was rejecting the https certificate at the code.jquery.com CDN, so it was not loading JQuery. The fix was to load JQuery resources from the https Google CDN instead (using URLs named by others above).

Question 6

I replaced my header file with the link to the Jquery lib on google, and it worked instantly as that page is loaded every time for me.

    <script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>