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使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 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
linux php mysql数据库备份实现代码
2009/03/10 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php实现简单洗牌算法
2013/06/18 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
PHP中“=&gt;
2019/03/01 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python实现把数字转换成中文
2015/06/29 Python
python实现人脸识别代码
2017/11/08 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
python 穷举指定长度的密码例子
2020/04/02 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
python安装sklearn模块的方法详解
2020/11/28 Python
我的大学生活职业生涯规划
2014/01/02 职场文书
新学期教师寄语
2014/04/02 职场文书
合作合同协议书范本
2015/01/27 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技