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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 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新手上路(五)
2006/10/09 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
google 搜索框添加关键字实现代码
2010/04/24 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
js实现缓动动画
2020/11/25 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python动态监控日志内容的示例
2014/02/16 Python
Python中的filter()函数的用法
2015/04/27 Python
利用Python获取操作系统信息实例
2016/09/02 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Python super()方法原理详解
2020/03/31 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
项目合作协议书
2014/04/16 职场文书
python模板入门教程之flask Jinja
2022/04/11 Python
python 闭包函数详细介绍
2022/04/19 Python