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 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
javascript 打印内容方法小结
Nov 04 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
Javascript学习指南
Dec 01 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
JS实现拼图游戏
Jan 29 Javascript
Javascript组合继承方法代码实例解析
Apr 02 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 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加MYSQL服务器
2006/10/09 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
PHP微信支付开发实例
2016/06/22 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
javascript 动态添加表格行
2006/06/22 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python中除法使用的注意事项
2014/08/21 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python的迭代器和生成器
2015/07/29 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
信息学院毕业生自荐信范文
2014/03/04 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
风险评估实施方案
2014/03/09 职场文书
爱心捐书活动总结
2014/07/05 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
起诉意见书范文
2015/05/19 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
文艺演出主持词
2015/07/01 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
vue+element ui实现锚点定位
2021/06/29 Vue.js
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js
vue动态绑定style样式
2022/04/20 Vue.js