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中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
浅谈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实现文件安全下载
2006/10/09 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
PDO::setAttribute讲解
2019/01/29 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
Django实现图片文字同时提交的方法
2015/05/26 Python
Python出现segfault错误解决方法
2016/04/16 Python
Python迭代和迭代器详解
2016/11/10 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
查看keras的默认backend实现方式
2020/06/19 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
电大物流学生的自我评价
2013/10/25 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
主管会计岗位责任制
2014/02/10 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
公司总经理任命书
2014/06/05 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android