jquery中val()小例子-----1

最新推荐文章于 2023-08-27 01:42:36 发布

寸寸时光

最新推荐文章于 2023-08-27 01:42:36 发布

阅读量973

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wang17866603359/article/details/78216379

版权

此方法类似于javascript中的value属性。val()可以用来设置和获取元素的值，无论元素是文本框，下拉列表它都可以返回元素的值，如果元素为多选，则返回一个包含所有选择的值得数组。
我们今天就可以利用某网站的邮箱登录界面，默认状态下，邮箱地址文本框和邮箱密码框内分别有“请输入邮箱地址”和“请输入邮箱密码”的提示。当将鼠标聚焦到邮箱地址文本框是，文本框内的“请输入邮箱地址”文字被清空，如果此时未在邮箱地址框中输入任何内容，而将鼠标焦点直接聚焦到密码输入框，则会发现密码框内的提示文字清空了，同时邮箱地址输入框的提示也被还原了。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>


<input type="text" id="address" value="请输入邮箱地址">
<input type="text" id="password" value="请输入邮箱密码">
<input type="button" value="登录">
<script src="jquery.min.js"></script>
<script>
// defaultValue属性包含该表单元素的初始值
$(function(){
           // 对地址栏进行操作
         $("#address").focus(function(){
              // 获取地址文本的值
              var txt_value=$(this).val();
              if(txt_value==this.defaultValue){
                 $(this).val("");
              }

         })
         $("#address").blur(function(){
             var txt_value =$(this).val();
             if(txt_value==""){
                 $(this).val(this.defaultValue);
             }
         })
        // 对密码框进行操作 实现过程与地址框相同
       $("#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("请输入邮箱密码");
              }
        })

 });
</script>
</body>
</html>

注意：focus（）方法相当于javascript中的onfocus（）方法，作用是处理获得焦点时的事件。
blur（）方法相当于javascript中的onblur（）方法，作用是处理失去焦点时的事件。
显示效果：
这里写图片描述

不难发现，val()方法不仅能设置元素的值，同时能获取元素的值。

寸寸时光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery中val()小例子-----1

此方法类似于javascript中的value属性。val()可以用来设置和获取元素的值，无论元素是文本框，下拉列表它都可以返回元素的值，如果元素为多选，则返回一个包含所有选择的值得数组。我们今天就可以利用某网站的邮箱登录界面，默认状态下，邮箱地址文本框和邮箱密码框内分别有“请输入邮箱地址”和“请输入邮箱密码”的提示。当将鼠标聚焦到邮箱地址文本框是，文本框内的“请输入邮箱地址”文字被清空，如果此
复制链接

扫一扫