JQuery中的val()函数

JQuery中的val()函数相当于Javascript中的value属性，可以用来设置和获取元素的值。

下面用一个简单的邮箱登陆界面来举个例子：

在默认情况下邮箱的地址输入框和密码输入框都有相应的提示。

要求：当鼠标聚焦在邮箱地址输入框时，提示将被清空；当鼠标聚集在邮箱密码输入框时，邮箱地址输入框中提示又出现了，但密码中提示消失了。

效果如下所示：

JQuery代码如下：

$(function () {
    $("#address").focus(function () {
        var txt_value = $(this).val();
        if(txt_value=="请输入邮箱地址"){
            $(this).val("");
        }
    });
    $("#address").blur(function () {
        var txt_value = $(this).val();
        if(txt_value==""){
            $(this).val("请输入邮箱地址");
        }
    });
    $("#password").focus(function () {
        var txt_value = $(this).val();
        if(txt_value=="请输入邮箱密码"){
            $(this).val("");
        }
    });
    $("#password").blur(function () {
        var txt_value = $(this).val();
        if(txt_value==""){
            $(this).val("请输入邮箱密码");
        }
    })
}) ;

HTML代码如下：

<input type="text" id="address" value="请输入邮箱地址"> <br/><br/>
<input type="text" id="password" value="请输入邮箱密码"> <br/><br/>
<input type="button" value="登录">

需要注意的是一定要引进JQuery库！

注：代码来源《锋利的JQuery》，转载请注明出处！