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 相关文章推荐
js正则表达式的使用详解
Jul 09 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
Vue Components 数字键盘的实现
Sep 18 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
PHP重定向的3种方式
2013/03/07 PHP
让焦点自动跳转
2006/07/01 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python实现合并字典的方法
2015/07/07 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
在Python中表示一个对象的方法
2019/06/25 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
应届生人事助理求职信
2013/11/09 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
计算机专业求职信
2014/06/02 职场文书
自荐信怎么写
2015/03/04 职场文书
Python基础之Socket通信原理
2021/04/22 Python