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

作者：菜鸟追梦旅行 | 2024-02-18 21:44:39

踩

jquery .attr读取不到值

问题： 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

问题：

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

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

浏览器弹框

问题出处：

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

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

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

问题原因：

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

解决办法：

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/110757?site

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

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

代码：

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