我们要实现立即注册这个按钮,光标获得焦点是一张图片,光标失去焦点的时候是另外一张图片
我们需要在文档加载完成之后,设置该事件hover事件
hover(over,out)这是jQuery的一个模仿悬停事件,即当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测,如果是,则会继续保持“悬停”状态,而不触发移出事件。
我们来看regist.js的代码:
//该函数在html文档加载完成之后会调用
$(function() {
/*
* 变量所有的错误信息,调用一个方法来决定是否显示错误信息
* */
$(".errorClass").each(function() {
showError($(this));//$(this)表示当前遍历的对象
});
//切换注册按钮的图片
$("#submitBtn").hover(function () {
//获得光标焦点
$("#submitBtn").attr("src","/goods/images/regist2.jpg");
},function(){
//失去光标的焦点
$("#submitBtn").attr("src","/goods/images/regist1.jpg");
});
});
//判断当前元素是否存在内容,存在显示,不存在不显示
function showError( ele ){
var text = ele.text();//获得该对象的文本值
if(!text){
ele.css("display","none");//让该对象消息
}else{
ele.css("display","");//显示对象
}
}
//实现验证码图片的切换功能
function changeVerifyCode() {
$("#imgVerifyCode").attr("src","/goods/VerifyCodeServlet?a="+new Date().getTime());
}
我们来看程序的运行效果