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.validate使用攻略 第三部
Jul 01 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
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.NET的入门教程
2006/10/09 PHP
php zend 相对路径问题
2009/01/12 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
header导出Excel应用示例
2014/01/24 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
浅谈php和.net的区别
2014/09/28 PHP
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
django中的setting最佳配置小结
2017/11/21 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Python列表操作方法详解
2020/02/09 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
大专生毕业的自我评价
2014/02/06 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
职业女性的职业规划
2014/03/04 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
人力资源部岗位职责
2015/02/11 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python