jQuery中text() val()和html()的区别实例详解


Posted in Javascript onJune 28, 2016

简单的说:html()和text()的区别主要在于是否包含标签。而val()针对的是表单元素。

但是有时还是不是那么太清晰。

html(),val(),text()都分为有参和无参。

举例说明它们的不同之处:

html()在没有参数的情况下,取得第一个匹配元素的内容。必须要注意的是,即使匹配多个,也只能取得匹配的第一个元素。
如:

<body>
<p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用。</p>
<h3>选中下面的文字,看看它的颜色</h3>
<h3>选中下面的文字,看看它的颜色</h3>
<h3>选中下面的文字,看看它的颜色</h3>
<input type="text" value="aaa">
</body>
</html>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
var con = $("p").nextAll("h3");
console.log(con.html());
</script>

此处的con匹配的3个h3元素,但是只会打印出第一个h3的内容。

如果我们此处换成text();那么会打印出三个h3的内容。

如果带参数的话,con.html(“aaa”);和con.text(“aaa”);效果一样,都能改变3个h3的内容。

不过如果con.html("<span>'aaa'</span>")和con.text("<span>'aaa'</span>");使用html会将span解析为标签,而text,则会将作为字符串插入。

<body>
<p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用。</p>
<h3><span>选中下面的文字,看看它的颜色</span></h3>
<h3><span>选中下面的文字,看看它的颜色</span></h3>
<input type="text" value="aaa">
</body>
</html>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
var con = $("p").nextAll("h3");
console.log(con.html());
console.log(con.text());
</script>

jQuery中text() val()和html()的区别实例详解 

html()会将标签也取出,但是text()只会获取文本部分。

再看val();

<body>
<input type="text" value="aaa"/>
<input type="button" value="按钮"/>
选择性别:<input type="radio" name="sex" checked value="男"><label>男</label>
<input type="radio" name="sex" value="女"><label>女</label>
<br><br>
选择地区:
<select style="width: 150px">
<option value="1">上海</option>
<option value="2">杭州</option>
<option value="3">南京</option>
<option value="4">丽江</option>
</select>
</body>
</html>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
console.log($("input:text").val());
console.log($("input:button").val());
console.log($("input[name='sex']:checked").val());
console.log($("select option:selected").text());
});
</script>

jQuery中text() val()和html()的区别实例详解

此处,可以关注下如何获取单选按钮的值,如何获取选中的select的值。

需要注意的是,option的value并不是显示在页面上的内容,因为设置或者是获取option的页面内容,需要使用text(),当然使用html()亦可。

关于三者的区别小结

   1. .val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。

    2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

以上所述是小编给大家介绍的jQuery中text() val()和html()的区别实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
Javascript实现单选框效果
Dec 09 Javascript
浅谈js的url解析函数封装
Jun 28 #Javascript
JavaScript中点击事件的写法
Jun 28 #Javascript
js改变style样式和css样式的简单实例
Jun 28 #Javascript
js改变css样式的三种方法推荐
Jun 28 #Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 #Javascript
获取input标签的所有属性的方法
Jun 28 #Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 #Javascript
You might like
PHP 上传文件的方法(类)
2009/07/30 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
用ADODB.Stream转换
2007/01/22 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
javascript基础知识
2016/06/07 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python 元类实例解析
2018/04/04 Python
Python 将pdf转成图片的方法
2018/04/23 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
测试时代收集的软件测试面试题
2013/09/25 面试题
员工自我鉴定范文
2013/10/06 职场文书
个人生活学习自我评价范文
2013/11/26 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书