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. CF740B Alyona and flowers 题解

    Content 有 \(n\) 个数 \(a_1,a_2,a_3,...,a_n\),给定 \(m\) 个区间,你可以选择一些区间使得它们的总和最大(也可以不选),求这个最大的总和. 数据范围:\(1 ...

  2. LuoguB2045 晶晶赴约会 题解

    Content 贝贝邀请晶晶下个星期 \(x\)(如果 \(x=7\) 表示星期日)一起去看展览,但是晶晶下个星期 \(1,3,5\) 都有课.请你判断晶晶能否同意贝贝的请求. 数据范围:\(x\in ...

  3. jquery绑定事件时如何向事件函数里传参数

    jquery绑定事件时如何向事件函数里传参数 jquery绑定事件时如何向事件函数里传参数 举例子说明: 步骤1: var button=$('<button type="button ...

  4. Linux 主从数据库

    主从数据库 主数据库的内容同步传输到附属数据库 客户访问附属数据库 这样做保证了数据库的稳定性 需要两台虚拟机 两边个虚拟机都要操作 配置hosts文件 进入/etc/hosts追加输入 192.16 ...

  5. django——django链接mysql数据库

    1.创建项目 django-admin startproject django_mysql 2.创建App python manage.py startapp app1 3.Mysql数据库配置 (1 ...

  6. 给初学者的STM32（Cortex-M3）中断原理及编程方法介绍 [原创www.cnblogs.com/helesheng]

    本人编著的<基于STM32的嵌入式系统原理及应用>(ISBN:9787030697974)刚刚在科学出版社出版.这本书花费了半年以上的时间,凝聚了笔者作为高校教师和嵌入式工程师的一些经验, ...

  7. Visual Studio Code常用快捷键

    说明 以下快捷键适用于windows环境下, Mac请将ctrl替换为command按键: 部分快捷键或不一样. 查看VSCode快捷键定义: settings -> keymaps. 目前使用 ...

  8. 【LeetCode】837. New 21 Game 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 相似题目 参考资料 日期 题目地址:htt ...

  9. Java 泛型通配符 T，E，K，V，?

    Java 泛型(generics)是 JDK 5 中引入的一个新特性, 泛型提供了编译时类型安全检测机制,该机制允许开发者在编译时检测到非法的类型. 泛型的本质是参数化类型,也就是说所操作的数据类型被 ...

  10. 编写Java程序，模拟文件操作过程中的异常处理

    返回本章节 返回作业目录 需求说明: 从控制中输入计算机磁盘中后缀名为".txt"的文件的完整物理路径. 如果该文件存在,则在控制台输出友好提示信息,告知用户该文件存在,如果文件不 ...