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 相关文章推荐
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
javascript数组去重方法分析
Dec 15 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
Vue深入理解插槽slot的使用
Aug 05 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
jQuery实现简单评论功能
2020/08/19 jQuery
python遍历目录的方法小结
2016/04/28 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
产品生产计划书
2014/05/07 职场文书
行政管理专业求职信
2014/07/06 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
机动车登记业务委托书
2014/10/08 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
员工表扬信怎么写
2015/05/05 职场文书
倡议书怎么写?
2019/04/11 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL