jQuery获取文本节点之 text()/val()/html() 方法区别


Posted in Javascript onMarch 01, 2011

在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明:
首先,html属性中有两个方法,一个有参,一个无参
1. 无参html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String
例子:
html页面代码:<div><p>Hello</p></div>
jquery代码:$("div").html();
结果:Hello
2.有参html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象
html页面代码:<div></div>
jquery代码:$("div").html("<p>Nice to meet you</p>");
结果:[ <div><p> Nice to meet you</p></div> ]

其次,text属性中有两个方法,一个有参,一个无参
1. 无参text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String
例子:
html页面代码:<p><b>Hello</b> fine</p>
<p>Thank you!</p>
jquery代码:$("p").text();
结果:HellofineThankyou!

2.有参text(val):设置所有匹配元素的文本内容, 与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象
html页面代码:<p>Test Paragraph.</p>
jquery代码:$("p").text("<b>Some</b> new text.");
结果:[ <p><b>Some</b> new text.</p> ]

最后,val()属性中也有两个方法,一个有参,一个无参。
1.无参val():获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
返回的是一个String、 array
例子:
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>]
2.有参val(val):设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为check,select,radio元件赋值,返回一个jquery对象
html页面代码:
<input type="text"/>
jquery代码:$("input").val("hello world!");
结果:hello world!
Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
用js编写留言板
Mar 17 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 Javascript
jquery一句话全选/取消全选
Mar 01 #Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 #Javascript
jquery中实现标签切换效果的代码
Mar 01 #Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 #Javascript
收集的10个免费的jQuery相册
Feb 26 #Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 #Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 #Javascript
You might like
简单采集了yahoo的一些数据
2007/02/14 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
php生成短网址示例
2014/05/05 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
js综合应用实例简单的表格统计
2013/09/03 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python多进程编程常用方法解析
2020/03/26 Python
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
市政管理求职信范文
2014/05/07 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
护理自荐信
2019/05/14 职场文书
python编写五子棋游戏
2021/05/25 Python
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android