问题：JQuery -- (‘#id‘).attr(‘value‘)无法得到表单的值

最新推荐文章于 2022-06-08 15:19:10 发布

Nshrod

最新推荐文章于 2022-06-08 15:19:10 发布

阅读量670

点赞数 2

分类专栏：前端问题文章标签： html html5 javascript jquery

本文链接：https://blog.csdn.net/Nshrod/article/details/112702268

版权

前端问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题： JQuery无法得到表单的值

代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="./js/jquery-3.1.1.js" charset="utf-8"></script>
    <title>表单验证</title>
  </head>
  <body>
    您的成绩：<input type="text" name="" value="" id="grade" placeholder="请输入你的成绩">
    <span id="promot"></span>
  </body>

  <!-- js -->
  <!-- JQUERY操作 -->
  <script type="text/javascript">
    var promot = $('#promot');


    // 失去焦点
    $('#grade').blur(function() {
	  // 获取input标签的value，并且判断
	  var grade = parseInt($('#grade').attr('value'));
      
      alert($('#grade').attr('value'));
      alert(isNaN(grade));
      // 1.判断grade的类型
      if (isNaN(grade)) {
        promot.text('输入的成绩不正确');
      }else{
        if (grade> 100 || grade < 0) {
          promot.text('请输入0到100以内的成绩');
        }
      }

    });
    // 得到焦点
    $('#grade').focus(function() {
      /* Act on the event */
      promot.text('');
    });

  </script>

</html>

问题：

经过多处alert()操作的测试，发现正是下面这行代码没有正确得到表单的值

var grade = parseInt($('#grade').attr('value'));
alert($('#grade').attr('value'));

浏览器弹框

问题出处：

请注意一行代码：
在这行代码中，我给出了一个value=""，所以在执行==(’#grade’).attr(‘value’)== 的时候，会去直接得到input标签中的value，会得到空值

您的成绩：<input type="text" name="" value="" id="grade" placeholder="请输入你的成绩">

那么在input标签中删除这个value="" 可以吗？
答案是不可以的 ，一旦删掉 value="" ，那么(’#grade’).attr(‘value’) 就会得到一个undefined。

问题原因：

$(‘id’).attr(‘标签属性’) 是侧重去得到一个标签内部属性的值的，所以在表单标签中，这个操作无法得到一个实时变化的表单内部的值。

解决办法：

解决办法，其实JQuery早就给出来了，就是使用 .val() 去获取表单的值。

var grade = parseInt($('#grade').val());

最后注意哦！Jquey自定义方法，和普通的dom操作是不兼容的，所以是不可以混着用的哦！

Nshrod

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
问题：JQuery -- (‘#id‘).attr(‘value‘)无法得到表单的值

问题： JQuery无法得到表单的值代码：<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <script src="./js/jquery-3.1.1.js" charset="utf-8"></script> <title>表单验证</title> </head>
复制链接

扫一扫