10-jQuery文本值的相关方法：html值设置以及获取、text值设置以及获取、value值设置以及获取

最新推荐文章于 2021-08-20 11:21:27 发布

原创最新推荐文章于 2021-08-20 11:21:27 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery

jquery 专栏收录该内容

9 篇文章

订阅专栏

这篇博客详细介绍了jQuery中针对元素文本值的操作，包括html、text和value的设置与获取方法。通过示例代码展示了如何使用jQuery改变和读取元素的html内容、纯文本以及input元素的值。这些方法对于前端开发人员在DOM操作中非常实用。

一、body部分代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery文本值的相关方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
        }
    </style>
    <script src="./js/jquery-1.12.4.js"></script>
</head>

<body>
    <button>设置html</button>
    <button>获取html</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置value</button>
    <button>获取value</button>
    <div>
        <p></p>
  </div>
    <input type="text">
</body>

</html>

二、html值设置以及获取

（1）、html值设置

$(“selector”).html（参数）

参数：需要添加的内容

代码示例：

 <script>
        $(function() {
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function() {
                $("div").html("<p>我是段落</p>");
            }
        });
    </script>

在这里插入图片描述

（2）、html值获取

$(“selector”).html（）
注意：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
代码示例：

<script>
        $(function() {
            var btns = document.getElementsByTagName("button");
            btns[1].onclick = function() {
                console.log($("div").html());
            }
        });
    </script>

在这里插入图片描述

三、text值设置以及获取

（1）、text值设置

$(“selector”).text（参数）

参数：需要添加的text内容
代码示例：

<script>
        $(function() {
            var btns = document.getElementsByTagName("button");
            btns[2].onclick = function() {
                $("div").text("<span>我是文本</span>");
            }
        });
    </script>

在这里插入图片描述

（2）、text值获取

$(“selector”).text（）
注意：取得所有匹配元素的内容。
代码示例：

 <script>
        $(function() {
            var btns = document.getElementsByTagName("button");
            btns[3].onclick = function() {
                console.log($("div").text());
            }

        });
    </script>

在这里插入图片描述

四、value值设置以及获取

（1）、value值设置

$(“selector”).val（参数）

参数：需要添加的内容

注意：selector一般是input元素

代码示例：

  <script>
        $(function() {
            var btns = document.getElementsByTagName("button");
            btns[4].onclick = function() {
                $("input").val("请输入内容");
            }
        });
    </script>

在这里插入图片描述

（2）、value值获取

$(“selector”).value（）
注意：获得匹配元素的当前值。
代码示例：

 <script>
        $(function() {
            var btns = document.getElementsByTagName("button");
            btns[4].onclick = function() {
                $("input").val("请输入内容");
            }
            btns[5].onclick = function() {
                console.log($("input").val());
            }
        });
    </script>