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 相关文章推荐
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
javascript history对象详解
Feb 09 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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使用正则表达式清除超链接文本
2013/11/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
python tkinter基本属性详解
2019/09/16 Python
python实现实时视频流播放代码实例
2020/01/11 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
小学教育毕业生自荐信
2013/11/18 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
网络编辑岗位职责
2014/03/18 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python