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. EhCache简单入门

    一 介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认CacheProvider.Ehcache是一种广泛使用的开源Java分布式缓存.主要面向通 ...

  2. CF918B Radio Station 题解

    Content 有 \(n\) 个形如 \(a_i.b_i.c_i.d_i\) 的 IP 地址.有 \(m\) 条命令,每条命令由一条字符串 \(s\) 和一个形如 \(p.q.r.s\) 的 IP ...

  3. CF1064A Make a triangle! 题解

    Content 有三条长度分别为 \(a,b,c\) 的线段.你可以在一个单位时间内将一条线段的长度增加 \(1\),试求出能使这三条线段组成一个三角形的最短时间. 数据范围:\(1\leqslant ...

  4. SPQuery ViewAttributes Sharepoint列表查询范围

    SPSite site=new SPSite(SPContext.Current.Web.Url); SPWeb web=site.OpenWeb(); SPList splist=web.Lists ...

  5. JAVA调用微信接口实现页面分享功能(分享到朋友圈显示图片，分享给朋友)

    钉钉提供的内网穿透之HTTP穿透:https://www.cnblogs.com/pxblog/p/13862376.html 网页分享到微信中如何显示标题图,如果自定义标题图,描述,显示效果如下 官 ...

  6. 自己常用的CMake用法总结

    欢迎指正 CMake : A.download : https://cmake.org/download/ B.tutorial: https://cmake.org/cmake-tutorial/ ...

  7. 【LeetCode】682. Baseball Game 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 使用栈模拟 日期 题目地址:https://leet ...

  8. C. Unfair Poll

    http://codeforces.com/problemset/problem/758/C C. Unfair Poll time limit per test 1 second memory li ...

  9. Codeforces 189A：Cut Ribbon（完全背包，DP）

    time limit per test : 1 second memory limit per test : 256 megabytes input : standard input output : ...

  10. 【Leetcode】718. 最长重复子数组

    最长重复子数组有一下性质 A: [1,2,3,2,1] B: [3,2,1,4,7]设横是A竖是B,有规律:若横元和竖元相等,则为1,不等为0 1 2 3 2 13 0 0 1 0 12 0 1 0 ...