JQuerty ne fonctionne pas

Bonjour, je suis débutant dans le jQuerty et en JavaScript et je ne sais pas pourquoi ma page ne fonctionne pas. Sur un site pour apprendre à coder (codecademy) ce même code fonctionne mais pourtant après un copié collé sur notepad++, le code ne fonctionne pas. Merci!
voila mon html,CSS,JS:
///////////////////////////////////////////////////////////////////////////////////////////////
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Disparition</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="blue"></div>
<div></div>
<div></div>
<div></div>
<br/><button>Cliquez sur moi !</button>
</body>
</html>
////////////////////////////////////////////////////////////////////////////////////////////
CSS:
div {
height: 100px;
width: 100px;
display: inline-block;
background-color: #F38630;
border-radius: 5px;
}

#blue {
background-color: #A7DBD8;
}
/////////////////////////////////////////////////////////////////////////////////////////////
Js:
$(document).ready(function() {
$('button').click(function() {
$('#blue').fadeOut('slow');
});
});

tous ces fichiers sont dans un même dossier et leurs nom sont: index.html / stylesheet.css / script.js