jquery 学习之二 属性 文本与值(text,val)


Posted in Javascript onNovember 25, 2010

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 value attribute 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="selected">Multiple3</option>
</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 代码:

<input type="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="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</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"]);
Javascript 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
js实现列表按字母排序
Aug 11 Javascript
js实现车辆管理系统
Aug 26 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 #Javascript
jquery 学习之二 属性(类)
Nov 25 #Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 #Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 #Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 #Javascript
学习并汇集javascript匿名函数
Nov 25 #Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 #Javascript
You might like
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php全排列递归算法代码
2012/10/09 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
js图片处理示例代码
2014/05/12 Javascript
初识Node.js
2014/09/03 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
深入解析Python编程中super关键字的用法
2016/06/24 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
数控专业毕业生自荐信范文
2014/03/04 职场文书
市场总经理岗位职责
2014/04/11 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
杨善洲观后感
2015/06/04 职场文书
工商行政处罚决定书
2015/06/24 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书