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

简介: 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>
相关文章
|
13天前
|
JavaScript CDN
jQuery方法小记
jQuery方法小记
21 0
|
13天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
13天前
|
存储 移动开发 JavaScript
HTML5中form表单防止重复提交的两种方法
HTML5中form表单防止重复提交的两种方法
|
13天前
html中div内容居中的方法使用弹性盒子居中
html中div内容居中的方法使用弹性盒子居中
12 0
|
13天前
|
JavaScript Serverless
jquery attr()方法
jquery attr()方法
16 0
|
11天前
|
缓存 JavaScript
|
11天前
|
JavaScript 索引
|
11天前
|
前端开发 JavaScript
|
13天前
|
存储 JSON 小程序
html在线预览CAD(手机小程序浏览DWG)二次开发图层表的方法
本文档介绍了DWG数据库中图层的存储结构及MxCAD库对图层的操作。图层信息存储于图层层表McDbLayerTable()中,每个记录对应一个图层,包含颜色、线型等属性,且有一个不可删除的默认"0"层。主要操作包括:通过MxCpp.getCurrentMxCAD()获取图层表,使用addLayer()添加图层,遍历图层,以及删除图层。此外,还展示了如何修改图层的关闭、冻结、锁定状态及颜色。提供了在线示例以演示这些功能。
html在线预览CAD(手机小程序浏览DWG)二次开发图层表的方法
|
13天前
|
JavaScript
jquery获取子元素的一些方法
jquery获取子元素的一些方法
11 0