jQuery focus和blur事件

 Html页面结构:

<fieldset>
  <legend align="center">会员登录</legend>
  <dl>
    <dt>用户名</dt>
    <dd>
      <input type="text" name="textfield" id="uname" value="合理"/>
    </dd>
  </dl>
  <dl>
    <dt>密   码</dt>
    <dd>
      <input type="text" name="textfield" id="upass" />
    </dd>
  </dl>
   <dl>
    <dt> </dt>
    <dd>
      <input type="submit" name="button" id="button" value="登录" />
    </dd>
  </dl>
  <div id="events"></div>
</fieldset>

JS

<script type="text/javascript">
     $(function(){
		 //
		$("#uname").focus(function(){
			$(this).addClass("my");
			
			var txt=$(this).val();
			//与默认值比较
			if(txt==this.defaultValue){
			    $(this).val("");	
			}
			
		}); 
		
		
		$("#uname").blur(function(){
			$(this).removeClass("my");
			
			var txt=$(this).val();
			//与默认值比较
			if(txt==""){
			    $(this).val(this.defaultValue);	
			}
			
		}); 
		
	});
</script>

效果

1)运行页面

2)获得焦点事件,清空文本值,并加载边框

3)失去得焦点事件,恢复文本值,并清除边框