章节
问答
课签
笔记
评论
占位
占位

jQuery的属性与样式之.val()

jQuery中有一个.val()方法主要是用于处理表单元素的值,比如 input, select 和 textarea。

.val()方法

  1. .val()无参数,获取匹配的元素集合中第一个元素的当前值
  2. .val( value ),设置匹配的元素集合中每个元素的值
  3. .val( function ) ,一个用来返回设置值的函数

 注意事项:

  1. 通过.val()处理select元素, 当没有选择项被选中,它返回null
  2. .val()方法多用来设置表单的字段的值
  3. 如果select元素有multiple(多选)属性,并且至少一个选择项被选中, .val()方法返回一个数组,这个数组包含每个选中选择项的值

 

.html(),.text()和.val()的差异总结:  

  1. .html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的html内容(包括html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
  2. .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。
  3. .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

任务

在代码编辑器中第37行填写相应代码

val()

在代码编辑器中第42行填写相应代码

val()

在代码编辑器中第48行填写相应代码

val
?不会了怎么办
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / keydew
"html()读取第一个元素的html内容"意思是:在调用的时候,譬如E.html(),这个E可以是单个元素,也可以是元素集合,当E是元素集合时,这个调用返回的就是E[0]元素的html内容。而不是:返回元素的html内容中的第一个元素题中把val()换成html()后,也就是$("#single").html(),这里$("#single")返回的就是单个select元素,所以会把这个select的所有html内容都显示出来。

最新回答 / 南城111
因为选择器为#multiple 也就是获取select标签的值,select的值为选中了的

最新回答 / 慕圣3571134
楼主,这句话意思主要指选择器选择多个元素即元素集的时候。举个例:<div class="test"></div><div class="test"></div><div class="test"></div>……$(".test").html("<p>I love imooc</p>");结果就是所有class为test的div里面添加一个p标签。

最新回答 / qq_long妹_0
<option>慕课网bbb</option>在这一句代码中,”慕课网bbb“就是option的value值,你原先的代码没有显示出来,是因为你把这个值传给了p标签,后面又给p标签传入了其它内容,被覆盖了

已采纳回答 / qq_珊瑚海_5
可以再看看这里面,http://www.imooc.com/code/8554<...图片...>

已采纳回答 / 枫叶咚咚咚
对。网页由HTML标签写成,但是功能不够强大、样子不好看,所以就用Javascript操作HTML标签来丰富网页功能、用CSS来让网页变好看。jQuery是一个Javascript脚本库。

已采纳回答 / 煎饼学徒
同时运用在多个元素上,是说html()、text()、val()分别使用的时候作用在多个元素上,不是说这3个方法同时使用。比如html(“div”),其中div有多个,那么html就在这选中的多个div上发挥作用。

已采纳回答 / Dinch
在W3school中是这么解释的value 属性为 input 元素设定值。对于不同的输入类型,value 属性的用法也不同:type="button", "reset", "submit" - 定义按钮上的显示的文本type="text", "password", "hidden" - 定义输入字段的初始值type="checkbox", "radio", "image" - 定义与输入相关联的值,提交到处理页面的值。注释:<input type="checkbox"> 和 <inpu...

已采纳回答 / 慕妹5016704
代码里有个<p></p>,给p标签赋予文本值

已采纳回答 / 夜莺z
被覆盖了,不信你把下面两个注释掉,看看

已采纳回答 / 炮灰乙
其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;左侧的红色字,

已采纳回答 / retisan
.html() .与val()的作用对象不同,html()是用来读取元素的html内容(包括html标签),val()是用来读取表单元素的"value"值,但是.html() .与val()的作用方法相同,应用在多个对象上时,只能读取第一个值。

最赞回答 / weibo_哆啦A梦有大口袋_0
<...code...>$("p").text( $("#single").val() )被选中了,并且把值赋给了p标签<p>慕课网</p>$("p").text( $("#multiple").val()) 被选中了,并且把值赋给了p标签,p标签原来的值被覆盖了你可以先把第二行注释掉,看看第一行的值是否被选中记得采纳

最赞回答 / 慕斯6979137
$("p")-->找到<p>元素.text()和.val()-->设置或返回被选元素的值$("#multiple")-->找到id为multiple的出处所以,$("p").text($("#multiple").val()) 这行代码中,你先看里面$("#multiple").val()-->就是找到id="multiple"的出处,然后用.val()取值。到了外面,$("p").text(...)就是,找到<p>元素,然后.text(),将上面得到的值放...
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言