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 相关文章推荐
Javascript常考语句107条收集
Mar 09 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
uniapp实现横向滚动选择日期
Oct 21 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文件上传表单摘自drupal的代码
2011/02/15 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
一些mootools的学习资源
2010/02/07 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
javascript 动态创建表格
2015/01/08 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
python批量提交沙箱问题实例
2014/10/08 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Python基于locals返回作用域字典
2020/10/17 Python
C#面试问题
2016/07/29 面试题
工程力学硕士生的自我评价范文
2013/11/16 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
个人安全生产责任书
2014/07/28 职场文书
2014年团队工作总结
2014/11/24 职场文书
小学新教师个人总结
2015/02/05 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python