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+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python Requests 基础入门
2016/04/07 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
酒店仓管员岗位职责
2014/04/28 职场文书
教师演讲稿开场白
2014/08/25 职场文书
户籍证明模板
2014/09/28 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
信访稳定工作汇报
2014/10/27 职场文书
三人合伙协议书范本
2014/10/29 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python