focusein and focuseout function in jQuery

focusein and focuseout function in jQuery:

html file:

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="focusin_focusout.js"></script>

<style type="text/css">

.color

{

background:#eee;

}

</style>

</head>

<body>

Username <input type="text" name="" id="username" /><span class="user"></span> </br>

Password <input type="password" name="" id="password" /><span class="pass"></span></br>

</body>

</html>

_________________________________________________________________________

jQuery(.js) file:

$(document).ready(function(){

$(':input').focusin(function(){

$(this).addClass('color');

});

$(':input').focusout(function(){

$(this).removeClass('color');

});

$('#username').focusin(function(){

$('.user').text('Enter username');

});

$('#username').focusout(function(){

$('.user').text('');

});

$('#password').focusin(function(){

$('.pass').text('Enter password');

});

$('#password').focusout(function(){

$('.pass').text('');

});

});