该书第二版3.2.10一节中,介绍val()方法时,所用的样例代码是有共性的,而且该样例的场景模式在实际工作中会用到,所以试着优化了一下,写了一个html文本输入框得到与失去输入焦点的提示信息显示切换函数.
原书代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>3-10-2-2</title><!--引入jQuery--><scriptsrc="../../scripts/jquery.js"type="text/javascript"></script><scripttype="text/Javascript">//<![CDATA[$(function(){
$("#address").focus(function(){//地址框获得鼠标焦点vartxt_value=$(this).val();//得到当前文本框的值if(txt_value==this.defaultValue){
$(this).val("");//如果符合条件，则清空文本框内容}
});
$("#address").blur(function(){//地址框失去鼠标焦点vartxt_value=$(this).val();//得到当前文本框的值if(txt_value==""){
$(this).val(this.defaultValue);//如果符合条件，则设置内容}
})
$("#passWord").focus(function(){vartxt_value=$(this).val();if(txt_value==this.defaultValue){
$(this).val("");
}
});
$("#password").blur(function(){vartxt_value=$(this).val();if(txt_value==""){
$(this).val(this.defaultValue);
}
})
});//]]></script></head><body><inputtype="text"id="address"value="请输入邮箱地址"/><
br/><
br/><inputtype="text"id="password"value="请输入邮箱密码"/><
br/><
br/><inputtype="button"value="登录"/></body></html>
将其中的JavaScript代码改为如下部分:
<scripttype="text/javascript">//<![CDATA[$(function(){vartoggleInputTipOnFocusBlur=function(event){//文本框获得鼠标焦点if(event.type=="focus"&&$(this).val()==this.defaultValue){
$(this).val("");//如果符合输入框内容为提示信息的条件，则清空文本框内容}elseif(event.type=="blur"&&$(this).val()==""){
$(this).val(this.defaultValue);//如果符合输入内容为空的条件，则设置内容}
};
$("#address").focus(toggleInputTipOnFocusBlur).blur(toggleInputTipOnFocusBlur);
$("#password").focus(toggleInputTipOnFocusBlur).blur(toggleInputTipOnFocusBlur);
});//]]></script>
利用函数链和固定函数名toggleInputTipOnFocusBlur,几乎可以无脑拷贝代码完成设置了.
其中要点: 事件处理函数获得的event参数,可以通过其type属性获得事件名称.