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实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
JavaScript数据类型的存储方法详解
Aug 25 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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完整的日历类(CLASS)
2006/11/27 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
npm全局环境变量配置详解
2020/12/15 Javascript
Python基于DES算法加密解密实例
2015/06/03 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python