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鼠标事件大全 推荐收藏
Nov 01 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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
PHP的分页功能
2007/03/21 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
Internet主要有哪些网络群组成
2015/12/24 面试题
Shell编程面试题
2012/05/30 面试题
remote接口和home接口主要作用
2013/05/15 面试题
医学专业毕业生个人的求职信
2013/12/04 职场文书
医务人员自我评价
2014/01/26 职场文书
新教师工作感言
2014/02/16 职场文书
个人授权委托书格式
2014/08/30 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
辞职书格式样本
2015/02/26 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python