jQuery的html()、text()、val()

Keeling1720

于 2021-06-29 16:48:21 发布

阅读量268

点赞数

分类专栏： JavaScript JavaWeb

本文链接：https://blog.csdn.net/weixin_44741023/article/details/118337759

版权

JavaWeb 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

JavaScript

32 篇文章 3 订阅

订阅专栏

jQuery的html()、text()、val()

前面介绍DOM的时候，我们提到过，可以通过DOM对象的innerText、innerHTML等信息修改标签的文本和属性等信息。
那么，jQuery可不可以呢？答案是肯定的。
且看下面介绍：

html()：设置和获取起始标签到终止标签中的内容，相当于innerHTML
text()：设置和获取起始标签到终止标签中的文本，相当于innerContext
val()：设置和获取表单项的value属性值

废话不多说，代码来一波：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            console.log('div-innerHTML',$("#hello").html());
            console.log('div-innerContext',$("#hello").text());
        })
    </script>
</head>
<body>
    <div id="hello">
        Hello,World!
        <span>
            我是div的后代span。
        </span>
    </div>

</body>
</html>

结果：
在这里插入图片描述
如果要修改的话，只需要直接在html中传参即可，text和value也一样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            console.log('div-innerHTML',$("#hello").html());
            console.log('div-innerHTML',$("#hello").html('啊！我被改了'));
            console.log('div-innerHTML',$("#hello").html());
        })
    </script>
</head>
<body>
    <div id="hello">
        Hello,World!
        <span>
            我是div的后代span。
        </span>
    </div>

</body>
</html>

结果：
在这里插入图片描述
来个val的例子吧，整个常用的清空按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                //置空前咱看看能否争取输出账号、密码吧
                console.log($('#username').val());
                console.log($('#password').val());
                //置空账号和密码
                $("#username").val('');
                $("#password").val('');
            })
        })
    </script>
</head>
<body>
    <input type="text" name="username" id="username">
    <br>
    <input type="text" name="password" id="password">
    <br>
    <button id="btn">置空</button>
</body>
</html>

显示：
在这里插入图片描述
点击按钮后，input栏目清空且console栏出现：

Keeling1720

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery的html()、text()、val()

jQuery的html()、text()、val()前面介绍DOM的时候，我们提到过，可以通过DOM对象的innerText、innerHTML等信息修改标签的文本和属性等信息。那么，jQuery可不可以呢？答案是肯定的。且看下面介绍：html()：设置和获取起始标签到终止标签中的内容，相当于innerHTMLtext()：设置和获取起始标签到终止标签中的文本，相当于innerContextval()：设置和获取表单项的value属性值废话不多说，代码来一波：<!DOCTYPE h
复制链接

扫一扫