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 post方式传递提交的实现代码
May 31 Javascript
微信jssdk用法汇总
Jul 16 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
JS+CSS实现炫酷光感效果
Sep 05 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中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
JS实现轮播图效果
2020/01/11 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
荷兰超市:DEEN
2018/03/14 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
航空大学应届生求职信
2013/11/10 职场文书
职工年度考核评语
2014/12/31 职场文书
师范生见习自我总结
2015/06/23 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
Oracle创建只读账号的详细步骤
2021/06/07 Oracle