Question: Basically, I am learning jQuery and it just wont work. I have tried to figure it out but cant seem to find anything wrong with my code. 

Here is my index:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0/Transitional//EN""http:/w3.org/TR/xhtml1/DTD/xhtml-Transitional.dtd">
<html>

<head>
<link rel="stylesheet" type="text/css" href="Exp_Style.css">
<script type="text/javascript" src="Exp_script.js"></script>
<script type="text/javascript" src="Exp_jQuery.js"></script>
</head>

<body>
<div class="testDiv"></div>
</body>

</html>

```

css: 

```
.testDiv{
width: 30px;
height: 30px;
background-color: grey;
}

```

Javascript:

```
$(document).ready(function(){
$(".testDiv").mouseenter(function(){
    $(".testDiv").fadeTo("fast",0.25);
});
});

```

Answer: 
Use jquery library first and then their dependency.

Change

```
<script type="text/javascript" src="Exp_script.js"></script>
<script type="text/javascript" src="Exp_jQuery.js"></script>

```

TO

```
<script type="text/javascript" src="Exp_jQuery.js"></script>
<script type="text/javascript" src="Exp_script.js"></script>

```
JQuery is a JavaScript library. If you try to call JQuery functions before its referenced they won't be defined. 

```
<head>
    <script type="text/javascript" src="Exp_jQuery.js"></script>
    <link rel="stylesheet" type="text/css" href="Exp_Style.css">
    <script type="text/javascript" src="Exp_script.js"></script>
</head>

```