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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
Prototype String对象 学习
2009/07/19 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
python显示天气预报
2014/03/02 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
实习教师自我鉴定
2013/09/27 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
六个一活动实施方案
2014/03/21 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
教师节倡议书2015
2015/04/27 职场文书
2015年教师节感言
2015/08/03 职场文书
Python如何配置环境变量详解
2021/05/18 Python
Python深度学习之实现卷积神经网络
2021/06/05 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers