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 添加/移除CSS类实现代码
Feb 11 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
VUE递归树形实现多级列表
Jul 15 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的5个入手程序
2006/11/23 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
php实现文件上传基本验证
2020/03/04 PHP
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
python从入门到精通(DAY 2)
2015/12/20 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
python读取xlsx的方法
2018/12/25 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
Django 开发环境配置过程详解
2019/07/18 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
python设置中文界面实例方法
2020/10/27 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
金融行业务员的自我评价
2013/12/13 职场文书
社团文化节邀请函
2014/01/10 职场文书
物流创业计划书
2014/02/01 职场文书
求职信需要的五点内容
2014/02/01 职场文书
转让协议书范本
2014/04/15 职场文书
护士求职自荐信范文
2015/03/04 职场文书
运动会5000米加油稿
2015/07/21 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js