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 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
javascript动画浅析
Aug 30 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
Vue组件基础用法详解
Feb 05 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 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 iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
如何在django中实现分页功能
2020/04/22 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
网络宣传方案
2014/03/15 职场文书
可口可乐广告词
2014/03/20 职场文书
自查自纠工作总结
2014/10/15 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
司机个人年终总结
2015/03/03 职场文书
消费者理赔投诉书
2015/07/02 职场文书
环保建议书作文300字
2015/09/14 职场文书
python爬虫selenium模块详解
2021/03/30 Python
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL