jQuery中使用attr prop val 获取value的异同

最新推荐文章于 2024-12-04 09:39:58 发布
原创 最新推荐文章于 2024-12-04 09:39:58 发布 · 270 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

                       

　　　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>
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

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

123123123
  
  • 1
  • 2
  • 3

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

123123thgf123thgf
  
  • 1
  • 2
  • 3

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

undefined
  
  • 1
  • 2
  • 3
  • 4

　　attr()输出为undefined，而prop()和val()输出为“空”。
　　输入value值后：控制台输出为：
　　

undefinedasdasdasdasd
  
  • 1
  • 2
  • 3

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

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.youkuaiyun.com/jiangjunshow

小花橙色
关注
最全面、最详细web前端面试题及答案总结
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
JavaEE知识体系
yuh2012的博客
07-11 2万+
1 1.文件上传下载 1.1 文件上传 1.1.1 文件上传的作用 例如网络硬盘！就是用来上传下载文件的。 在智联招聘上填写一个完整的简历还需要上传照片呢。 1.1.2 文件上传对页面的要求 1.必须使用表单，而不能是超链接； 2.表单的method必须是POST，而不能是GET； 3.表单的enctype必须是multipart/form-data； 4.在表单中添加file表
jQuery中使用attr(), prop(), val()获取value的异同
justforuse的博客
02-05 7560
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
详谈jQuery中使用attr(), prop(), val()获取value的异同
10-19
下面小编就为大家带来一篇详谈jQuery中使用attr(), prop(), val()获取value的异同。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JQ方法：html()、text()、val()、attr()、prop()
qq_41504815的博客
03-10 415
1、html() 等同于JS中的 innerHTML 方法，可以获取标签，无参数是获取值，有参数是设置值。 2、text() 等同于JS中的 innerText，没有参数是获取值，有参数是设置值，只获取文本，不获取标签 3、val() 等价于 value ，常用于表单操作，无参是获取，有参是设置值 4、attr() attr() 方法设置或返回被选元素的属性值。 5、prop() 一个参数,如果是表单的checked等,就是判断该元素是否有该属性(是否被选择)。如果是id,class之类的
val和attr和prop获取数据中的区别
wd521521的博客
05-08 864
var vals = $('#id').val(); var attrs = $('#id').attr('value'); var props = $('#id').prop('value'); 代码如上所示，为输入框设定了初始值：123，此时点击按钮，控制台输出为： ? 1 2 3 123 123 123
attr、prop、val三个用法
weixin_30932215的博客
06-21 156
<body> <div class="div1" con="c1"></div> <input type="checkbox" checked="checked">是否可见<!--加了和没加checked的区别就是默认有没有勾--> <input type="checkbox">是否...
JavaScript学习
potato___的博客
12-28 1736
JavaScript学习 一、JavaScript入门 JavaScript：是Web开发领域中的一种功能强大的编程语言。 作用：主要用于开发交互式的Web页面，使网页的互动性更强，用户体验更好。 Web页面是由多个网页组成的。 网页制作涉及的技术：HTML、CSS和JavaScript。 HTML代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。 CSS代表了样式，样式是网页的外观，从审...
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3543
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
attr()，val()，prop()，html()，text()理解
weixin_41528730的博客
12-29 324
先举个例子》》 html():向匹配的元素中添加html标记。比如、等html标签。添加的元素将覆盖原有的元素内容。text():向匹配的元素中添加文本。如果文本包含html标签将会以文本的形式输出。添加的文本将会覆盖原有的元素内容。val():设置或者获取DOM元素的value属性值。比如:获取input元素的value值 (“#inp”).attr(data-name)   //   u
JQuery之val()和value、prop和attr的比较
程序猿小九九的博客
03-04 747
val()和value。以及 prop和attr的比较
html()和text()和val()方法、attr()和prop()方法
weixin_46065214的博客
08-23 1136
html()和text()和val()方法、attr()和prop()方法
js中.val()和.html()和.attr()和.text()的区别
最新发布
m0_62909831的博客
12-04 732
val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。其中有部分元素没有value，该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值。html() 方法返回或设置被选元素的内容 (inner HTML)。如果该方法未设置参数，则返回被选元素的当前内容。attr() 方法设置或返回被选元素的属性值。根据该方法不同的参数，其工作方式也有所差异。text 属性可设置或返回选项的文本值//text中可设置参数文本。
【JQuery】attr、val、prop、html方法的功能
yuxiangdeming的博客
03-06 389
一、attr、val、prop方法示例代码（可以直接测试） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试val、attr、prop</title> </head> <body> ...
Spring源码学习【五】填坑篇之PropertyValue解析
一颗贪婪的星
08-20 4774
经过上一篇文章 Spring源码学习【四】依赖注入过程 对Spring依赖注入过程的分析，我们知道了在注入Property时会创建一个深拷贝副本，将这个副本持有的Property注入到Bean中，在创建的过程中会使用BeanDefinitionValueResolver解析PropertyValue，代码如下： BeanDefinitionValueResolver valueResolver...
Failed to coerce property:acquireIncrement[propVal: ; propType: int]
ZERO の BLOG
04-17 1493
问题截图【原因】c3p0-config.xml文件中<property name="initialPoolSize" value="10"/> 上述配置方式value值类型默认为String类型，因此出错【解决方法】c3p0-config.xml文件中<property name="initialPoolSize">10</property> 改成上述书写方式即可。
jQuery attr()获取属性和设置属性的方法
热门推荐
u013746071的专栏
09-06 7万+
前言： 在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，只需要用到attr()这个函数就可以了。attr是attribute（属性）的缩写。 语法： 1、attr(“属性名”)； //获取属性的值（取得第一个匹配元素的属性。通过这个方法可以方便的从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，
jquery attr/attribute()方法
乐杨俊浅谈LAMP
10-16 8358
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，用一个attr()就可以全部搞定了,赞一个先 ^^ jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。 1. at
jquery中val获取值，attr获取属性值和attr设置属性值
u010746364的博客
11-24 8900
$(document).ready(function(){ $("#btn1").click(function(){ alert("Value: " + $("#test").val()); }); $("#btn2").click(function(){ alert("Value: " + $("#btnValue").val()); }); }); 姓
jquery中attr和prop的区别
03-28
attr和prop都是jQuery中用于获取和设置元素属性的方法，但它们有不同的应用场景和用法： 1. attr用于获取和设置HTML属性值，它是基于元素的HTML属性工作的；prop用于获取和设置DOM元素的属性值，它是基于DOM属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值