详谈jQuery中使用attr(), prop(), val()获取value的异同

最新推荐文章于 2023-12-03 18:48:05 发布

转载最新推荐文章于 2023-12-03 18:48:05 发布 · 646 阅读

JavaScript 专栏收录该内容

82 篇文章

订阅专栏

本文通过示例对比了jQuery中attr(), prop() 和 val() 方法的区别，特别是在获取input元素value值时的不同表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery中有3个获取元素value值的函数比较相似：attr(), prop(), val()；拿来比较一下。　

示例代码：

 
         <!DOCTYPE html>
        
         <html lang=
         "en"
         >
        
         <head>
        
         <meta charset=
         "UTF-8"
         >
        
         <title></title>
        
         <script src=
         "jquery-2.1.4.js"
         ></script>
        
         </head>
        
         <body>
        
         <input type=
         "text"
         value=
         "123"
         />
        
         <button id=
         "btn"
         >click</button>
        
         <script>
        
         $(
         "#btn"
         ).click(
         function
         (){
        
         var
         attr=$(
         "input"
         ).attr(
         "value"
         );
        
         var
         prop=$(
         "input"
         ).prop(
         "value"
         );
        
         var
         val=$(
         "input"
         ).val();
        
         console.log(attr);
        
         console.log(prop);
        
         console.log(val);
        
         })
        
         </script>
        
         </body>

代码如上所示，为输入框设定了初始值：123，此时点击按钮，控制台输出为：

1

2

3

改变输入框的值，此时控制台输出：　　　

1

2

3

如果我们没有为文本框设定初始值，即删除value=”123”后，依旧使用如上js代码，则相应输出如下：

undefined

attr()输出为undefined，而prop()和val()输出为“空”。

输入value值后：控制台输出为：

1

2

3

 
         undefined
        
         asdasd
        
         asdasd

attr()输出依然为undefined，而prop()和val()则输出实际值。

可见，prop()和val()都能获取到文本框的实际value值，而attr()获取的则始终为文档结构中的value的属性值，与文本框实际值无关，并不会变化。