代码如下: <div> <input id=”username” type=”text” class=”txt1″ value=”请输入用户名” onclick=”if(this.value==’请输入用户名’){this.value=”; }” onfocus=”if(this.value==’请输入用户名’){this.value=”; }” /> <input id=”password” type=”text” class=”txt2″ value=”请输入密码” onclick=”if(this.value==’请输入密码’){this.value=”;this.type=’passw
在本文中，我们将深入探讨如何使用JQuery实现一个功能，即在用户登录后记住他们的用户名和密码。这个功能是通过利用cookies来实现的，cookies是一种在客户端存储数据的小型文本文件，可以在用户下次访问网站时恢复之前输入的信息。
我们看到HTML部分，其中包含两个输入字段，分别用于输入用户名和密码。这两个输入框的初始值为提示文字"请输入用户名"和"请输入密码"。当用户点击或聚焦这些输入框时，JavaScript函数会清除这些默认值，以便用户可以输入自己的信息。
```html
<div>
<input id="username" type="text" class="txt1" value="请输入用户名" onclick="if(this.value=='请输入用户名'){this.value=''; }" onfocus="if(this.value=='请输入用户名'){this.value=''; }" />
<input id="password" type="text" class="txt2" value="请输入密码" onclick="if(this.value=='请输入密码'){this.value='';this.type='password';}" onfocus="if(this.value=='请输入密码'){this.value='';this.type='password';}" />
</div>
```
接着，我们转向JQuery部分。`$(document).ready()`函数确保在页面加载完成后执行里面的代码。在这个函数中，我们首先检查是否存在名为"rmbUser"的cookie。如果这个cookie的值为"true"，这意味着用户希望记住他们的登录信息。此时，我们会自动勾选"记住我"的复选框（假设其id为"ck_rmbUser"），并从cookies中恢复用户名和密码，填充到相应的输入框。
```javascript
$(document).ready(function(){
if ($.cookie("rmbUser") == "true") {
$("#ck_rmbUser").prop("checked", true);
$("#username").val($.cookie("username"));
$("#password").remove();
$("#pass").append("<input id='password' type='password' class='txt2'/>");
$("#password").val($.cookie("password"));
}
});
```
在用户点击登录按钮时，`#loginButton`的点击事件被触发。如果`check()`函数返回`true`，表示用户名和密码有效，那么`login()`函数会被调用进行登录操作。`check()`函数主要负责验证输入是否为空，如果为空则给出相应提示。
```javascript
$("#loginButton").click(function(){
if(check()){
login();
}
});
function check(){
var username = $("#username").val();
var password = $("#password").val();
if(username == "" || username == "请输入用户名"){
$("#tip").text("请输入用户名!");
$("#username").focus();
return false;
}
if(password == "" || password == "请输入密码"){
$("#tip").text("请输入密码!");
$("#password").focus();
return false;
}
$("#tip").text("");
return true;
}
```
`login()`函数通过AJAX向服务器发送POST请求，验证用户名和密码的有效性。如果登录成功，会将用户名添加到cookies（这里可能有误，应该是将已有的用户名和密码更新到cookies，因为前面已经从cookies中读取了用户名和密码），然后调用`save()`函数保存用户的选择，并重定向到首页。
```javascript
function login(){
$.ajax({
type:"POST",
url:"login!loginValidate.action",
data:{userName:$("#username").val(),password:$("#password").val()},
dataType:"json",
beforeSend: function(){ showOverlay(); },
success:function(data){
if(data.success){
addCookie("userName", $("#username").val(), 0); // 0表示不设置过期时间，浏览器关闭时cookie消失
save();
location.href = "/index.jsp";
}else{
$("#overlay").hide();
$("#tip").text("用户名或密码错误，请重新登录！");
return false;
}
}
});
}
```
`save()`函数负责处理记住用户名和密码的逻辑。如果"记住我"的复选框被选中，它会创建两个新的cookies，分别是"rmbUser"和"username"以及"password"，并设置为期7天的过期时间。如果复选框未选中，它会删除这3个cookies，确保不会记住用户信息。
```javascript
function save(){
if ($("#ck_rmbUser").prop("checked")) {
var username = $("#username").val();
var password = $("#password").val();
$.cookie("rmbUser", "true", { expires: 7 });
$.cookie("username", username, { expires: 7 });
$.cookie("password", password, { expires: 7 });
}else{
$.cookie("rmbUser", "false", { expire: -1 });
$.cookie("username", "", { expires: -1 });
$.cookie("password", "", { expires: -1 });
}
}
```
以上就是使用JQuery实现记住用户名和密码功能的详细过程。这个功能通过结合HTML、CSS、JavaScript（JQuery）以及服务器端的交互，为用户提供了一种方便的方式，让他们能够在下次访问时快速登录。同时，也确保了在用户不想保留登录信息时能够轻松地清除这些信息。
