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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
7个JS基础知识总结
Mar 05 Javascript
js获取form的方法
May 06 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
总结js函数相关知识点
Feb 27 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 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
解析wamp5下虚拟机配置文档
2013/06/27 PHP
php简单防盗链实现方法
2015/07/29 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
原生JS进行前后端同构
2018/04/22 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
营销总经理的岗位职责
2013/12/15 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
小学数学课后反思
2014/04/23 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
主婚人致辞精选
2015/07/28 职场文书