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

最新推荐文章于 2022-08-18 08:49:58 发布

不及你笑靥如花

最新推荐文章于 2022-08-18 08:49:58 发布

阅读量321

点赞数

分类专栏： jquery 文章标签： html jquery

本文链接：https://blog.csdn.net/qq_43775721/article/details/112986908

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery文本值的相关方法

一、body部分代码展示
二、html值设置以及获取
- （1）、html值设置
- （2）、html值获取
三、text值设置以及获取
- （1）、text值设置
- （2）、text值获取
四、value值设置以及获取
- （1）、value值设置
- （2）、value值获取

一、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>

在这里插入图片描述

不及你笑靥如花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10-jQuery文本值的相关方法：html值设置以及获取、text值设置以及获取、value值设置以及获取

jQuery文本值的相关方法一、body部分代码展示二、html值设置以及获取（1）、html值设置（2）、html值获取三、text值设置以及获取（1）、text值设置（2）、text值获取四、value值设置以及获取（1）、value值设置（2）、value值获取一、body部分代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam
复制链接

扫一扫