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. JetBrains又出神器啦!Fleet,体验飞一般的感觉

    目录 简介 从eclipse到Fleet Fleet的特性 JetBrains Space 总结 简介 java开发的同学可能对于JetBrains这家公司并不陌生,因为JetBrains号称拥有世界 ...

  2. LuoguP5006 [yLOI2018] 大美江湖 题解

    Content 题意实在是太过复杂了,因此请回到题面查看. Data Range 本部分和 Solution 部分变量的含义同题面. \(1\leqslant n,m\leqslant 100,0\l ...

  3. HTML行内级元素之间的空格问题

    HTML行内级元素之间的空格问题 1.为什么元素之间会产生空格? 在编写行内级元素(包括inline-block元素)的代码之间如果有空格(换行),在浏览器上就会显示元素之间有空格. 示例代码如下: ...

  4. java 数据类型String 【正则表达式】匹配工具 Pattern和Matcher

    Pattern和Matcher的介绍: Pattern对象是正则表达式编译后在内存中的表示形式,因此正则表达式宇符串必须先被编译为Pattern对象,然后再用该Pattern对象创建对应的Matche ...

  5. 使用.NET 6开发TodoList应用文章索引

    系列导航 使用.NET 6开发TodoList应用(1)--系列背景 使用.NET 6开发TodoList应用(2)--项目结构搭建 使用.NET 6开发TodoList应用(3)--引入第三方日志 ...

  6. JAVA中SpringMVC获取bean方法，在工具类（utils）注入service

    有时候我们会出现无法用注解 @Autowired 注入bean的情况,这个时候可以 通过contextLoader获取 WebApplicationContext ctx = ContextLoade ...

  7. Linux使用SCP命令不使用密钥直接进行远程复制(SSH免密登录)

    假设A服务器要把文件复制到B服务器上 首先我们要在A服务器上生成密钥对 参考:https://www.cnblogs.com/pxblog/p/14396409.html 然后在把生成的密钥公钥id_ ...

  8. 【LeetCode】1102. Path With Maximum Minimum Value 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 排序+并查集 优先级队列 日期 题目地址:https: ...

  9. 【Android开发】找乐，一个笑话App的制作过程记录

    缘起 想做一个笑话App的原因是因为在知乎上看过一个帖子,做Android可以有哪些数据可以练手,里面推荐了几个数据开放平台.在这些平台中无一不是有公共的笑话接口,当时心想这个可以拿来练手啊,还挺有意 ...

  10. 【LeetCode】293. Flip Game 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 遍历 日期 题目地址:https://leetcode ...