Jquery操作文本内容（三个方法：html()、text()、var()）

一、html()获取和设置文本内容和标签

1、获取标签里的结构和内容

$("ul").html()    //获取标签里所有的结构和内容

2、设置标签里的文本内容

$(".a").html("你好，世界")    //设置标签里的id是a里的文本内容

$("li").html("<span>你好，世界<span>")    //设置标签是li为span标签并加上相应内容

3、html()实例

<!--

html获取标签里的文本和标签

等价原生JS中的innerHTML

格式：$("标签").html()

设置标签里的文内容

格式：$("标签").html("内容或标签")

-->

<html>

     //导入jQuery

<script src="jquery-3.6.0.min.js"></script>

<body>

	<ul>

		<li class="a">12</li>

		<li>34</li>

		<li>4</li>

	</ul>

<script>

     //获取元素标签里所有的结构，以字符串方式返回

     var sen=$("ul").html()

	 console.log(sen)

         //设置标签里的内容

      $(".a").html("我是第一个li标签里的内容")

      $("li").html("<span>全部li变成了span标签<span>")

</script>

</body>

</html>

二、 text()获取和设置文本

1、获取标签里的文本内容

$("ul").text()    //获取标签里所有的文本内容

2、设置标签里的文本内容

$("ul").text("你好，世界")    //获取标签里所有的文本内容

3、text实例

<!--

html获取标签里的文本

等价原生JS中的innerText

格式：$("标签").text()

设置标签里的文内容

格式：$("标签").text("文本内容")

-->

<html>

     //导入jQuery

<script src="jquery-3.6.0.min.js"></script>

<body>

	<ul>

		<li class="a">12</li>

		<li>34</li>

		<li>4</li>

	</ul>

<script>

     //获取元素标签里所有的文本，以字符串方式返回

     var sen=$("ul").text()

	 console.log(sen)

         //设置标签里的文本内容

      $(".a").text("我是第一个li标签里的内容")

     //其中的<span>标签不起作用，只能被识别成普通文本

      $("li").text("<span>全部li变成了span标签<span>") 

</script>

</body>

</html>

三、val主要获取设置表单元素

1、获取表单里的内容

$("input").val()  //获取input标签里的文本内容

2、设置表单里的文本内容

$("input").val("你好，世界")  //设置input标签里的文本内容

3、val()实例

<!--

val获取标签里的文本

等价原生JS中的value

格式：$("标签").val()

设置标签里的文内容

格式：$("标签").val("文本内容")

-->

<html>

     //导入jQuery

<script src="jquery-3.6.0.min.js"></script>

<body>

    <form>

        <inpt type="text" value="123">

    </form>

<script>

     //获取元素标签里所有的文本，返回123

     var sen=$("input").val()

	   console.log(sen)

         //设置表单里的内容

      $("input").val("我是文本框里的新内容")  

</script>

</body>

</html>

Jquery操作文本内容（三个方法：html()、text()、var()）的更多相关文章

  1. 深入学习jQuery描述文本内容的3个方法

    × 目录 [1]html() [2]text() [3]val()[4]总结 前面的话 在javascript中,描述元素内容有5个属性,分别是innerHTML.outerHTML.innerTex ...

  2. Dom选择器及操作文本内容

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  3. 辛星跟您玩转vim第四节之操作文本内容

    首先值得一提的是.我的vim教程pdf版本号已经写完了.大家能够去下载,这里是csdn的下载地址:csdn下载,假设左边的下载地址挂掉了,也能够自行在浏览器以下输入例如以下地址进行下载:http:// ...

  4. Vue-Vue文本渲染三种方法 {{}}、v-html、v-text

    {{ }} 将元素当成纯文本输出 v-htmlv-html会将元素当成HTML标签解析后输出 v-textv-text会将元素当成纯文本输出 代码: <!DOCTYPE html> < ...

  5. jquery 操作iframe的几种方法总结

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...

  6. JQuery操作类数组的工具方法

    JQuery学习之操作类数组的工具方法 在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$('div')将返回div里面的所有div元素包装的JQuery对象.在这中情况 ...

  7. （19）jQuery操作文本和属性

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...

  8. jQuery 源码解析(三) pushStack方法 详解

    该函数用于创建一个新的jQuery对象,然后将一个DOM元素集合加入到jQuery栈中,最后返回该jQuery对象,有三个参数,如下: elems Array类型 将要压入 jQuery 栈的数组元素 ...

  9. EditControl 限制输入文本的三种方法

    下边是三种限制编辑框输入内容的方法.在VS里建立基于对话框的应用程序CMyEdit,打开资源视图,删除对话框上自带的确定和取消按钮.然后添加一编辑框控件,将其ID修改为IDC_MY_EDIT,通过类向 ...

随机推荐

  1. Linux 三剑客之grep

    目录 Linux 三剑客之grep 搭配命令-find 三剑客之grep: 正则表达式: Linux 三剑客之grep 搭配命令-find find命令是根据文件的名称或者属性查找文件,并不会显示文件 ...

  2. Spring 容器的启动过程 流程图 自己看源码的梳理 如有错错误 请指正

  3. CF336A Vasily the Bear and Triangle 题解

    Content 一个矩形的顶点为 \((0,0)\),其对顶点为 \((x,y)\),现过 \((x,y)\) 作直线,分别交 \(x\) 轴和 \(y\) 轴于 \(A,B\) 两点,使得 \(\t ...

  4. 实体转为json的,如何处理外键情况

    实体转为json的,如何处理外键情况 jc.registerJsonValueProcessor(Userrelation.class, new JsonValueProcessor() {// 此处 ...

  5. [源码解析] PyTorch 分布式之弹性训练(2)---启动&单节点流程

    [源码解析] PyTorch 分布式之弹性训练(2)---启动&单节点流程 目录 [源码解析] PyTorch 分布式之弹性训练(2)---启动&单节点流程 0x00 摘要 0x01 ...

  6. 安装选择msi格式还是zip(windows下Nodejs zip版下载安装及环境变量配置)

    安装选择msi格式还是zip((windows下Nodejs zip版下载安装及环境变量配置)) -----以node.js 安装为例: 1,外观对比: ✿ 简单介绍一下node的作用: • node ...

  7. 【LeetCode】897. Increasing Order Search Tree 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 重建二叉树 数组保存节点 中序遍历时修改指针 参考资 ...

  8. .Net Core&Agile Config配置中心

    当服务逐渐的增多,对各服务的配置管理愈加重要,轻量级的配置中心,入手或是搭建都简单许多,基于.net core开发的轻量级配置中心AgileConfig,功能强大,上手简单. https://gith ...

  9. MySQL中视图的定义、原理--触发器

    视图概述 视图是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的查询所引用的表,并且在引用 ...

  10. 【嵌入式】arduino IDE串口监视器可以正常使用但其他软件发送串口指令没有反应的问题

    解决办法: 1.检查 波特率baudrate 是否一致 2.检查 数据位长度databits 是否一致 3.检查 停止位长度stopbits 是否一致 4.检查 奇偶校验位 是否一致 5.(特殊)是否 ...