定义和用法

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. django Modelform 使用

    前言: 为什么要用form去验证呢? 我们提交的是form表单,在看前端源码时如果检查到POST URL及我们提交的字段,如果没有验证我们是否可以直接POST数据到URL,后台并没有进行校验,直接处理 ...

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

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

  3. 【转载】51CTO-Android设置模拟器屏幕大小

    在Eclipse Android中设置模拟器屏幕大小是本文要介绍的内容,主要是来了解并学习Eclipse Android中模拟器的设置,具体关于Eclipse Android内容的详解来看本文.   ...

  4. 牛客网 牛客小白月赛1 H.写真がとどいています

    H.写真がとどいています   链接:https://www.nowcoder.com/acm/contest/85/H来源:牛客网     这个题数乱了,导致wa了好几次. 特别弱智,从A开始往上,就 ...

  5. Codeforces 323C Two permutations

    题目描述 You are given two permutations pp and qq , consisting of nn elements, and mm queries of the for ...

  6. Java 字符集，编码、解码

    1. 计算机中文件.数据底层都是基于二进制的. 计算机底层并没有文本文件.图片文件之分,它只是记录着每个文件的二进制序列. 字符集:包含着字符和二进制序列之间的对应关系,一个字符对应一个二进制序列. ...

  7. (入门SpringBoot)SpringBoot结合拦截器(七)

    SpringBoot拦截器: 拦截器还是照旧和springmvc一样: @Componentpublic class MyInterceptor implements HandlerIntercept ...

  8. delphi中如何将string类型的字符串数据转化成byte[]字节数组类型的数据

    var  S:String;  P:PChar;  B:array of Byte;begin  S:='Hello';  SetLength(B,Length(S)+1);  P:=PChar(S) ...

  9. Move resources allocated using unmanaged interface to managed devm interface

    转载:http://blog.csdn.net/swingboard/article/details/27207497   So today let’s talk about devm functio ...

  10. visual studio 2010 调试

    非startup project网站 通过attach to process  添加进程w3wp可以实现断点调试 若有多个,可以在iis中添加应用程序池,然后在网站的高级设置里设置应用程序池里,选择对 ...