You need to add the script only after jQuery library is loaded using script tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  // your code should be here
  alert(typeof jQuery)
</script>

The document ready handler is using to execute the code only after DOM elements are loaded.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  console.log('Outside document ready handler ' + $('.test').length)

  $(document).ready(function() {
    console.log('Inside document ready handler ' + $('.test').length)
  });
</script>
<div class="test"></div>

UPDATE 1: You can use defer if script is in a file, refer following question: jquery loaded async and ready function not working

UPDATE 2: Or you can bind load event handler to the script tag using addEventListener method.

<script async id="script" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  document.getElementById('script')
    .addEventListener('load', function() {
      alert(typeof jQuery)
    });
</script>

FYI : I don't know why you are doing this, for optimizing the speed of content load it's always better to move the script tags at the end of body which helps to load content first.

You could do something like this:

function checkVariable(){
   if ( window.jQuery){
      Do your jquery stuff here
   }
   else{
      window.setTimeout("checkVariable();",100);
   }
}
checkVariable();

Apologies for the formatting...stuck on my phone right now.

I did not see this method listed, so I thought I would demonstrate using the JavaScript HTML DOM EventListener.

Example #1 Using the jQuery.ready() Method:

<p id="test-jquery">jQuery Not Loaded</p>

<script>
  $(document).ready(function() {
    var elem = $('#test-jquery');
    elem.text('jQuery Is Loaded');
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This method will not work since jQuery has yet to be loaded. Running the above example will output:

ERROR: {
  "message": "ReferenceError: $ is not defined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 13,
  "colno": 3
}

Example #2 Using the addEventListener() Method:

<p id="test-jquery">jQuery Not Loaded</p>

<script>
  window.addEventListener('DOMContentLoaded', function() {
    var elem = $('#test-jquery');
    elem.text('jQuery Is Loaded');
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This method will work since we are listening for the Window DOMContentLoaded event.

From Mozilla:

The original target for this event is the Document that has loaded. You can listen for this event on the Window interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Document: DOMContentLoaded event.

A different event, load, should be used only to detect a fully-loaded page. It is a common mistake to use load where DOMContentLoaded would be more appropriate.