定义和用法

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. JS-严格模式、非严格模式

    2018年11月14日晚上,我在“深入理解javascript”书上第一次知道“严格模式”“非严格模式”这2个名词: “严格模式”使用指令:“use strict”: 这个指令我其实有经常看到,在其他 ...

  2. Codeforces 898 A. Rounding

      A. Rounding   time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  3. NanoPC-T3 64位裸机编程 —— 启动和运行状态切换

    参考: https://github.com/metro94/s5p6818_spl https://github.com/trebisky/Fire3/tree/master/Boot_NSIH h ...

  4. Java微信开发以及对各种云的评价

    目前一个人用Java开发一个微信的会员系统,开发已经结束,现在进入测试阶段. 有一些时间看看市面上的一些Java的微信开发视频,看了一下北风网的<微信公众平台开发Java版第一季>中的1, ...

  5. codevs_1043 方格取数（棋盘DP）

    1043 方格取数 2000年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description ...

  6. Java开发笔记（一百零四）普通线程池的运用

    前面介绍了线程的基本用法,以及多线程并发的问题处理,但实际开发中往往存在许多性质相似的任务,比如批量发送消息.批量下载文件.批量进行交易等等.这些同类任务的处理流程一致,不存在资源共享问题,相互之间也 ...

  7. 转：浅析Collections.sort

    浅析Collections.sort 问题引入   在之前的一次Java上机实习中,老师布置了一道很简单的题: 从控制台输入10个整数,对它们进行升序排序并输出.   考虑到只有10个数,需要比较的次 ...

  8. ASIHTTPRequest 问题总结

    1, ASIHttpRequest与30秒超时 今天在项目中发现一个ASIHttpRequest的Bug.这个Bug可能会导致你Http请求延时至少在timeout设置时间结束之后.更可怕的是,为了找 ...

  9. 如何简单去掉dede后台的验证码 dedecms5.7 验证码怎么去掉

    很多朋友都在找,如何去掉dede后台的验证码,每次登陆都很繁琐.        现在教大家一个dedecms5.7 验证码怎么去掉的最直接的方法: 在dedecms5.7[验证码安全设置]里,说修改后 ...

  10. GIS可视化——热点格网图

    一.简介 原理:按照格网大小将区域进行划分,由一个矩形格网替代当前范围内的数据,由格网中心数字代替格网的权重(可以为格网中数据的数量,数据某权重的平均值.最大值.最小值等), 由格网之间颜色的不同表达 ...