function not working

function not working

function firstFocus() {
 $('#form-first').hide();
 $('#first').show();
 $('#first').focus();
 }   

function firstBlur() {
if ($('#first').attr('value') == '') {
$('#first').hide();
$('#form-first').show();
}
}

//functions called from an external js file

<input type='text' id='form-first' name='first' value='First Name' onfocus='firstFocus()' size='50' >
<input type='text' id='first'      name='first' value=''  size='50' onblur='firstBlur()' >

I'm new to Jquery and can't seem to get the firstBlur function to work.  the textbox form-first is suppose to to show if the field is empty and focus is lost. However, it does not work and only shows an empty textbox. I'm using IE9 and Firefox 18 with jquery 1.9.1-min.

Thanks,
Adam