jQuery not working in head but OK in body
<p>If I place my jQuery at the end of the body without $(document).ready(function() , it works fine. If I place it in the head using $(document).ready(function(), it no longer works. I realized I needed the function() when placing jQuery in the head from here, but when I try to implement it myself, no dice. I've stared at it too long, I'm not seeing the problem. </p>

<pre><code>&lt;head&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
        $("#testTable tr").hover(
            function(){$(this).addClass("highlighted");},
            function(){$(this).removeClass("highlighted");} 
        );
});
&lt;/script&gt;

&lt;style type='text/css'&gt;
.tablerow {background-color:yellow;}
.tableheader {background-color:Pink;}
.highlighted {background-color:Green;}
&lt;/style&gt;    
&lt;/head&gt;

&lt;body&gt;
&lt;table id="testTable"&gt;
    &lt;thead class="tableheader"&gt;
        &lt;tr&gt;&lt;th&gt;No&lt;/th&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Age&lt;/th&gt;&lt;th&gt;Salary&lt;/th&gt;&lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody id="testBody"&gt;
        &lt;tr class="tablerow"&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Yong Mook Kim&lt;/td&gt;&lt;td&gt;28&lt;/td&gt;&lt;td&gt;$100,000&lt;/td&gt;&lt;/tr&gt;
        &lt;tr class="tablerow"&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;Low Yin Fong&lt;/td&gt;&lt;td&gt;29&lt;/td&gt;&lt;td&gt;$90,000&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
&lt;/body&gt;
</code></pre>
