how to access $ in the header/body when jquery is included in the footer

Question

Is there a way to access $ or jQuery when the jquery file is included in the footer and certain functions are defined on the header?

for an example, $(document).on('change', and $(document).on('click', function on my header. So when i include the jquery file on the header it solves the problem or else i get the $ is not defined

is there a way to define $ so it can be accessed from the header, rather than moving the jquery file?

Answer 1

Don't run the code in the header until after the page is loaded:

<script>
window.addEventListener("DOMContentLoaded", function() {
    // put all the code that uses `$` here
});
</script>

This is the vanilla JS equivalent to `$(document).ready(function() { ... });`