jquery实现文本框得到失去焦点

           《锋利的jquery一书》中的用jquery实现文本框得到失去焦点的效果，效果如图：

       

        结构是一个简单的表单，html里用到了fieldset及legend这两个表现来实现半外边框的效果。fieldset里分别放了三个div来放三个表单，名称用了label属性，后面用了input及textarea，代码如下：        

<form action="" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label  for="username">名称:</label>
<input id="username" type="text" value="名称" />
</div>
                <div>
<label for="pass">密码:</label>
<input id="pass" type="password" value="密码" />
</div>
                <div>
<label for="msg">详细信息:</label>
<textarea id="msg" rows="2" cols="20">详细信息</textarea>
</div>
</fieldset>
</form>

            jquery代码主要是给表单的元素添加得到焦点focus及失去焦点blur这两个事件。注意这里选取表单的所有元素用的是$(":input")。注意jquery选择器里:表示是什么的，[ ]表示有什么的，如：比如 $("tr:first") 表示的是tr是first的是哪些，$(":input") 是input的是那些，$("div[id]") 表示的是有id属性的div有哪些。

     而这里的$(":input") 返回form中的所有表单对象,包括textarea、select、button等。在focus及blur事件里分别添加及移除相应的得到或失去焦点的效果。在得到焦点时判断当前表单元素的值是否等于默认值，如果等于，则让它为空；而在失去焦点时判断当前表单元素的值是否为空，如果为空，则给它赋默认值。这里学习了jquery如何取得表单的值及如何为其赋值的方法，这里还结合了JS的方法this.defaultValue，表单的默认值，代码如下：          

$(":input").focus(function(){
  $(this).addClass("focus");
  if($(this).val() ==this.defaultValue){  
                  $(this).val("");           
  } 
}).blur(function(){
 $(this).removeClass("focus");
 if ($(this).val() == '') {
                $(this).val(this.defaultValue);
             }
});