今天看了一下jquery,感觉到了他的强大,以前看网页的javascript的效果看的是个晕的,现在jquery大大的简化了所需的代码量,并且感觉可以利用他实现所有的javascript的动态效果,并且解决了以前百思不得其解的一个问题。
类似于各个大网站的注册页面,当我们将鼠标点击一下输入框时,旁边就会显示一些提示语,我的想法是,在输入框的旁边定位一个div框,将里面的的内容置为空( ),那么当获得输入框的焦点时,用html函数将里面的字给改了就OK,当失去焦点再改为空。
代码:
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input#user").focus(function(){
$(".user").html("只包含字母和数字,并且不能低于六位");
});
$("input#user").blur(function(){
$(".user").html(" ");
});
$("input#pas").focus(function(){
$(".pas").html("所输入的密码不能低于六位");
});
$("input#pas").blur(function(){
$(".pas").html(" ");
});
$("input#repas").focus(function(){
$(".repas").html("请输入正确的密码");
});
$("input#repas").blur(function(){
$(".repas").html(" ");
});
});
</script>
<form action="#" method="post">
<div align="center" style="position:relative;left;left: 0px; top: 0px;" >
<table>
<tr>
<td align="right">用户名:</td>
<td width=442 align="left"><input name="user_id" size=30 maxlength="20" type='text' id='user' />*
<div class="user" style="position:absolute; width: 231px; left: 375px; top: 5px;"> </div></td>
</tr>
<tr>
<td align="right">密码:</td>
<td align="left"><input name="password" size=30 maxlength="20" type='password' id='pas'>*
<div class="pas" style="position:absolute; width: 231px; left: 375px; top: 30px;"> </div></td>
</tr>
<tr>
<td align="right">重复密码:</td>
<td align="left"><input name="rptpassword" size=30 maxlength="20" type='password' id='repas'>*
<div class="repas" style="position:absolute; width: 231px; left: 375px; top: 55px;"> </div></td>
</tr>
<table>
</form>