定义和用法

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. GMM 的EM 实现

    算法逻辑在这里: http://www.cnblogs.com/Azhu/p/4131733.html 贴之前先说下,本来呢是打算自己写一个的,在matlab 上,不过,实在是写不出来那么高效和健壮的 ...

  2. poj 3623 Best Cow Line, Gold 后缀数组 + 贪心

    题目链接 题目描述 对于一个给定的字符串,可以从左右两端取字符,依次排列构成一个新的字符串. 求可能构成的字符串中字典序 最小的一个. 例:ACDBCB -> ABCBCD 思路 参考自 xue ...

  3. HDU 6225.Little Boxes-大数加法 (2017ACM/ICPC亚洲区沈阳站-重现赛（感谢东北大学）)

    整理代码... Little Boxes Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/O ...

  4. K皇后问题递归解法

      #include<iostream> #include<cmath> #include<ctime> using namespace std; bool che ...

  5. Codeforces 791D Bear and Tree Jump（树形DP）

    题目链接 Bear and Tree Jumps 考虑树形DP.$c(i, j)$表示$i$最少加上多少后能被$j$整除. 在这里我们要算出所有$c(i, k)$的和. 其中$i$代表每个点对的距离, ...

  6. Java面试常问的问题（转载）

    并发.JVM.分布式.TCP/IP协议 1)Java的数据结构相关的类实现原理,比如LinkedList,ArrayList,HashMap,TreeMap这一类的.以下简单模拟一个数据结构的连环炮. ...

  7. cogs——1008. 贪婪大陆（清华巨佬代码）——树状数组

    1008. 贪婪大陆 ★★   输入文件:greedisland.in   输出文件:greedisland.out   简单对比时间限制:1 s   内存限制:128 MB 试题四:贪婪大陆  [题 ...

  8. 某考试 T2 Tree

    2 树 2.1 题目描述 给一棵n 个节点的树,节点分别编号为0 到n - 1.你可以通过如下的操作来修改这棵树:首先先删去树上的一条边,此时树会分裂为两个连通块,然后在两个连通块之间加上一条新的边使 ...

  9. ssh配置含义解释

    ssh包括客户端配置(ssh_config)和服务端配置(sshd_config) 一.客户端配置ssh_config,客户端软件有SecureCRT.putty.Xshell等 “#”表示注释,虽然 ...

  10. Dapper Sqlpara where in

    Mark一下:string sql = "SELECT * FROM SomeTable WHERE id IN @ids" var results = conn.Query(sq ...