定义和用法

text() 方法方法设置或返回被选元素的文本内容

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="./js/jquery-1.12.4.js"></script>

    <title>Document</title>

</head>

<body>

    <div id="div1">div有文本内容</div>

    <div id="div2">

        div2内的文本

        <span>span内有文本内容</span>

    </div>

    <input type="text" id="input1" value="这是一个input标签">

    <input type="text" name="" id="input2" placeholder="能成功获取">

    <button id="button1" value="这是一个button标签"></button>

    <script>

        console.log($("#div1").text());

        console.log($("#div2").text());

        console.log($("#div2 span").text()) ;

        console.log($("#input1").text());

        console.log($("#input2").text());

        console.log($("#button1").text());

    </script>

</body>

</html>

console打印的结果

可以看出text()只输出标签内的文本内容，和js的innerText方法一样

定义和用法

html() 方法返回或设置被选元素的内容 (inner HTML)，包括标签。

如果该方法未设置参数，则返回被选元素的当前内容。

<body>

    <div id="div1">div有文本内容</div>

    <div id="div2">

        div2内的文本

        <span>span内有文本内容</span>

    </div>

    <input type="text" id="input1" value="这是一个input标签">

    <input type="text" name="" id="input2" placeholder="能成功获取">

    <button id="button1" value="这是一个button标签"></button>

    <script>

        console.log($("#div1").html());

        console.log($("#div2").html());

        console.log($("#div2 span").html());

        console.log($("#input1").html());

        console.log($("#input2").html());

        console.log($("#button1").html());

    </script>

</body>

通过console的打印的结果

打印当前标签内的文本内容，如果有子标签，则把子标签本身和子标签内的文本一起打印

这个和js的innerHTML差不多

定义和用法

val() 方法返回或设置被选元素的值。

元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

方法主要用于获取表单元素的值

如果该方法未设置参数，则返回被选元素的当前值。

<body>

    <div id="div1">div有文本内容</div>

    <div id="div2">

        div2内的文本

        <span>span内有文本内容</span>

    </div>

    <input type="text" id="input1" value="这是一个input标签1">

    <input type="text" name="" id="input2" value="这是一个input标签2" placeholder="能成功获取">

    <button id="button1" value="这是一个button标签"></button>

    <script>

        console.log($("#div1").val());

        console.log($("#div2").val());

        console.log($("#div2 span").val());

        console.log($("#input1").val());

        console.log($("#input2").val());

        console.log($("#button1").val());

    </script>

</body>

通过控制台打印结果

val()是用来输出表单内的数据，可以看出div和span标签内的文本并没有被输出，我还测试了H5新标签placeholder

同样也没有被输出，所以这个val应该是只针对标签的value属性的

JQuery中的text(),html()和val()区别的更多相关文章

  1. JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？jQuery中的text()、html()和val()

    一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HT ...

  2. jQuery中的text(),html(),val()用法

    jQuery中的text(),html(),val()用法 text():获取或者改变指定元素的文本 html():获取或改变指定元素的html元素以及文本 val():获取或者改变指定元素的valu ...

  3. jQuery中attr和prop方法的区别

    jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...

  4. jquery中的this与$(this)的区别总结（this：html元素）（$(this)：JQuery对象）

    jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象) 一.总结 1.this所指的是html 元素,有html的属性,可用 this.属性  ...

  5. jquery中this与$(this)的用法区别

    jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test ...

  6. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  7. 深入理解jQuery中live与bind方法的区别

    本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...

  8. jQuery中attr和prop方法的区别说明

    jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check  node=123 id=ck & ...

  9. jquery中的$().each和$.each的区别

    jquery中的$().each和$.each的区别 注意:jquery中的$().each和$.each的区别,前者只能遍历数组,后者可以遍历数组和对象 备注:sinobook项目中地名本体相关地按 ...

随机推荐

  1. 【nginx】nginx的介绍

    Nginx 反向代理初印象 Nginx (“engine x”) 是一个高性能的HTTP和反向代理 服务器,也是一个IMAP/POP3/SMTP服务器.其特点是占有内存少,并发能力强,事实上nginx ...

  2. django+vue+nginx生产环境部署配置

    部署环境: 1. linux redhat 7.1 2.python 3.6.3 3. vue 4. nginx 5. gunicorn 6. supervisord 安装: 一. 基础环境安装 1. ...

  3. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---44

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  4. Linux Shell 文本处理工具集锦【转】

    转自:http://www.cnblogs.com/me115/p/3427319.html 内容目录: find 文件查找 grep 文本搜索 xargs 命令行参数转换 sort 排序 uniq ...

  5. mdev详解【转】

    转自:http://blog.chinaunix.net/uid-29401328-id-5019678.html 一.概述 mdev是busybox提供的一个工具,用在嵌入式系统中,相当于简化版的u ...

  6. Python Challenge 第十五关

    第15关,题目是 whom? 有一张图片,是个日历.日历的年份是 1XX6,中间是被挖去的洞.然后图中1月26日被画了个圈,当天是星期一.右下角的二月小图中有29号,可以得知这是闰年.然后查看源代码. ...

  7. Smpt命令顺序不正确。 服务器响应为: Error: need EHLO and AUTH first !

    刚发现以前做的QQ邮箱发送邮件不能用了,查找了下原因:未加( EnableSsl  SSL加密连接 )导致的,顿时觉得很坑,以前QQ邮箱也没有这个限制啊,可能是最近加的. 好吧不多说直接从头走起,照顾 ...

  8. 网络请求失败记录（安卓4g网络下第一次请求特别慢或者失败）

    最近app的一次版本上线以后出现4g网络下请求接口特别慢,第一次调用接口非常非常慢或者直接访问失败,后面就正常了,但是WiFi情况下并不会出现这个问题.最主要的是IOS的线上app并没有问题. 开始怀 ...

  9. 慎用lodash的cloneDeep函数

    lodash的cloneDeep函数能够很方便的拷贝对象,但是一旦拷贝一些很复杂的对象就有可能报错.比如用cloneDeep克隆一个vue实例,就有可能包key.charAt is not a Fun ...

  10. bzoj 5125: [Lydsy1712月赛]小Q的书架

    新学了一波 决策单调性 dp 套路.... 这种dp一般是长这样的 => f[i][j] = max/min  { f[i-1][k] + cost(k+1,j)} ,其中cost函数满足四边形 ...