The meaning of $, this in js code

Well here I am again, revealing my ignorance. It has paid off before, receiving good advice from you guys, so here we go again

I sometimes make pages with javascript functions. Most commonly I "link" a routine to an event in a tag, like
<div id=mydiv onmouseover=myroutine()>
...
and then f.ex.:
myroutine() {
document.getElementById("mydiv").style.color=#ff0000;


However, I sometimes read examples that contain $, this, children. I haven't really understood how this nomenclature works.

I think "children" are nodes that are contained in parent nodes according to DOM. However, I don't understand the $ nomenclature. I think this has to do where focus is??

Is there someone who can explain to me how to read examples like the ones below or where I can do some self study?

Thanks.

div class="info" style="display: inline;" 
onMouseOut="$(this).children('div').hide('normal');" 
onMouseOver="$(this).children('div').show('normal');"
>

$('.info').bind('mouseenter', function() {
$('div', this).show('normal');
});

$('.info').bind('mouseleave', function() {
$('div', this).hide('normal');
});

Code (markup):

 

jQuery, or a (other) custom function.