jquery 学习之二 属性 文本与值(text,val) - Web前端
作者:98wpeu发布时间:2026-07-07分类:网页前端技术浏览:197
导读:text()取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对html和xml文档都有效。getthetextcontentsofall...
text()
取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对html和xml文档都有效。get the text contents of all matched elements.The result is a string that contAIns the combined text contents of all matched elements. this method works on both HTML and XML documents.返回值
String
示例
HTML 代码:
<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>JQuery 代码:
$("p").text();结果:
Test Paragraph.Paraparagraph ------------------------------------------------------------------------------------------------------------------------------text(val)
设置所有匹配元素的文本内容与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).Set the text contents of all matched elements.Similar to html(), but escapes HTML (Replace "<" and ">" with their HTML entities).返回值
jQuery
参数
val (String) : 用于设置元素内容的文本
示例
HTML 代码:
<p>Test Paragraph.</p>jquery 代码:
$("p").text("<b>Some</b> new text.");结果:
[ <p><b>Some</b> new text.</p> ] ------------------------------------------------------------------------------------------------------------------------------val()
获得第一个匹配元素的当前值。在 jquery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。Get the content of the valueattribute of the first matched element.In JQuery 1.2, a value is now returned for all elements, including selects. For multiple selects an Array of values is returned.返回值
String,array
示例
获得单个select的值和多选select的值。
HTML 代码:
<p></p><br/><select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected></select>
jQuery 代码:
$("p").append("<b>Single:</b> " + $("#single").val() +
" <b>Multiple:</b> " + $("#multiple").val().join(", ")
);
结果:
[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]获取文本框中的值
HTML 代码:
<inputtype="text" value="some text"/>jQuery 代码:
$("input").val();结果:
some text ------------------------------------------------------------------------------------------------------------------------------val(val)
设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为select元件赋值Set the value attribute of every matched element.In jQuery 1.2, this is also able to set the value of select elements, but selecting the appropriate options.返回值
jQuery
参数
val (String) : 要设置的值。
示例
设定文本框的值
HTML 代码:
<input type="text"/>jQuery 代码:
$("input").val("hello world!"); ------------------------------------------------------------------------------------------------------------------------------val(val)
check,select,radio等都能使用为之赋值返回值
jQuery
参数
val (Array<String>) : 用于 check/select 的值
示例
设定一个select和一个多选的select的值
HTML 代码:
<select id="single"><option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected> <option>Multiple2</option>
<option selected></select><br/>
<input type="checkbox" value="check1"/> check1
<input type="Checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
jQuery 代码:
$("#single").val("Single2");$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
相关推荐
- jquery ajax 调用失败的原因示例介绍 - Web前端
- jQuery中filter()和find()的区别深入了解 - Web前端
- jQuery表格插件datatables用法总结 - Web前端
- JQuery对class属性的操作实现按钮开关效果 - Web前端
- 使用jQuery解决IE与FireFox下createElement方法的差异 - Web前端
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例) - Web前端
- jQuery中RadioButtonList的功能及用法实例介绍 - Web前端
- jQuery遍历Form示例代码 - Web前端
- Jquery显示、隐藏元素以及添加删除样式 - Web前端
- jquery实现文字由下到上循环滚动的实例代码 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 8分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 9jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


