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. CF111A Petya and Inequiations 题解

    Content 请找出一个由 \(n\) 个正整数组成的数列 \(\{a_1,a_2,\dots,a_n\}\),满足以下两种条件: \(\sum\limits_{i=1}^na_i^2\geqsla ...

  2. 逆波兰(加、减、乘、除、括号)表达式原理及C++代码实现

    当我们输入一个数学表达式,是中缀表达式,我们首先转换为后缀表达式(逆波兰表达式),然后再进行求值. 代码思路: (1)首先对输入的中缀表达式合法性进行判断,bool isStringLegal(con ...

  3. java源码——两种格式日期的转换

    这里要实现1981.07.30 格式和July 30.1981格式的日期的转换. 在输入时进行日期格式的识别,并且对字符串进行操作并且输出. 难点在于字符串格式的识别和月份的转换,我用了正则表达式匹配 ...

  4. 【LeetCode】605. Can Place Flowers 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 贪婪算法 日期 题目地址:https://leetcode.c ...

  5. .NET Core 实现动态代理做AOP(面向切面编程)

    1.介绍 1.1 动态代理作用 用动态代理可以做AOP(面向切面编程),进行无入侵式实现自己的扩展业务,调用者和被调用者之间的解耦,提高代码的灵活性和可扩展性,比如:日志记录.性能统计.安全控制.事务 ...

  6. mybatis查询时使用基本数据类型接收报错-attempted to return null from a method with a primitive return type (int)

    一.问题由来 自己在查看日志时发现日志中打印了一行错误信息为: 组装已经放养的宠物数据异常--->Mapper method 'applets.user.mapper.xxxMapper.xxx ...

  7. [opencv]调用鼠标事件执行grabcut算法实现阈值分割

    #include<iostream> #include <opencv2/opencv.hpp> #include <math.h> using namespace ...

  8. Linux组

    Linux组 介绍 Linux中,没有用户和文件可以脱离组而存在 用户有"组"这一属性:相关链接 文件有"所有者""组""其他组& ...

  9. 编写Java程序，实现字符串统计和处理

    返回本章节 返回作业目录 需求说明: 在控制台输入纯字符的字符串,输出当前字符串的长度. 统计出该字符串中出现相同字母次数最多的字母(不考虑不同字母出现次数相同的情况). 将出现最多次数的字母字母替换 ...

  10. gRPC创建Java RPC服务

    1.说明 本文介绍使用gRPC创建Java版本的RPC服务, 包括通过.proto文件生成Java代码的方法, 以及服务端和客户端代码使用示例. 2.创建生成代码工程 创建Maven工程,grpc-c ...