Il codice jQuery può essere inserito ed eseguito sia negli elementi head o body. Molti sviluppatori preferiscono il secondo approccio perchè incrementa la performance percepita delle loro pagine. Tuttavia, tra questi due metodi ci sono delle differenze che vanno approfondite. Vediamole insieme.
Nell'elemento body il codice viene letto insieme con il resto della marcatura e quindi eseguito automaticamente. Quindi sia:
<script type="text/javascript">
$('#test').addClass('test');
</script>
</body>
</html>
che:
<script type="text/javascript">
(function() {
$('#test').addClass('test');
})();
</script>
</body>
</html>
funzioneranno come previsto. Invece nell'elemento head bisogna attendere che il documento venga caricato completamente, quindi occorre usare l'evento ready():
<head>
<script type="text/javascript">
$(document).ready(function() {
$('#test').addClass('test');
});
</script>
</head>
o una sua forma equivalente.