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>
posted @ 2022-01-17 16:57  永恒之月TEL  阅读(268)  评论(0)  编辑  收藏  举报