定义和用法

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. jdbc in postgres

    try { Class.forName("org.postgresql.Driver").newInstance(); String url = "jdbc:postgr ...

  2. FZU 1056 扫雷游戏【搜索】

    Accept: 2584    Submit: 6790Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem Description 扫雷是 ...

  3. vue.js移动端app实战2

    貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects,简单 ...

  4. 超实用的Nginx极简教程，覆盖了常用场景

    概述 安装与使用 安装 使用 nginx 配置实战 http 反向代理配置 负载均衡配置 网站有多个 webapp 的配置 https 反向代理配置 静态站点配置 搭建文件服务器 跨域解决方案 参考 ...

  5. navicat链接lunix平台上的数据库

    xsell 4.navicat软件 想在链接数据库的得常规设置里设置: 链接名称.主机名(链接lunix平台后才干ping 通的ip地址) port.username.password 然后选择ssh ...

  6. SilverLight-DataConversion: 银光数据转换

    ylbtech-SilverLight-DataConversion: 银光数据转换 1.A, Silverlight字符串格式表 1.B, 价格格式转换器 1.C, 日期时间格式转换器 1.D, 图 ...

  7. Codis的安装

    其他环境准备: 安装JDK,安装Zookeeper 1.创建codis账户 useradd codis passwd codis 2.解压codis3.1.3-go1.7.4-linux.tar.gz ...

  8. spring Multiple MongoTemplate

    <!-- 数据环境配置 --> <mongo:repositories base-package="com.my9yu.manager.module.server.repo ...

  9. 【音乐App】—— Vue-music 项目学习笔记：播放器内置组件开发（二）

    前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 播放模式切换 歌词滚动显示 ...

  10. 【性能优化】——前端性能优化之DOM

    前言:本文参考学习自 RenChao Guan的博客,来源FSUX.ME,感谢原作者,本文的思维导图为自己整理 补充: 浏览器工作流程 避免重绘和回流的四种方式的具体实现