In effetti è molto semplice. Se lo script non è associato a un evento pronto del documento, verrà attivato immediatamente, ovvero quando viene caricata la pagina , NON quando è stato caricato. Ciò che significa è che i controlli / tag HTML sotto il tag dello script non sono stati ancora aggiunti al DOM. E come tale, il tentativo di interagire con loro non funzionerà.
Se metti i tag script dopo che il controllo / tag è stato creato, il tag è nel DOM e jquery lo "vede".
Per questi motivi è sempre consigliabile associare il tuo javascript a una funzione "pronta" del documento, in modo che si attivi solo quando l'albero DOM è stato correttamente e completamente istanziato.
Per una spiegazione più dettagliata, potresti essere interessato a leggere questo post , a proposito funzione "pronta".
Controlla inoltre link se sei interessato a sapere come viene caricata la pagina web dal browser (suggerimento: dall'alto verso il basso o "come si vede"). Il consiglio nella risposta principale è posizionare il tag script alla fine del documento, il che ha senso, ma se si utilizza jquery, qualunque sia il posto del tag script, se si avvolge il codice in una funzione "pronta" non avrai problemi.