JQuery Why can I select an identifier using dot notation

Question

My code runs unexpectedly, and I want to know why.

Basically, I press the button to change the value of the input text box. An entry has the identifier "here", but not a name or class. However, I can change its value using dot notationhere.value

Note that I use simple dot notation instead of the jQuery selector, parenthesis notation, or method getElementById(id). As far as I know, this should NOT work.

jsfiddle demo

<input id="here" readonly>
<input type="button" id="btn" value="Click">
<script>
$(document).ready(function() {
  $('#btn').on('click', function() {
    // why does this dot notation work for id?
    here.value = 'you clicked on the button';
    // should be:
    // $('#here').val('you clicked on the button');
  });
});
</script>