jQuery常用的DOM操作（设置属性、值、内容）

最新推荐文章于 2024-05-16 04:04:41 发布

sleepwalker_1992

最新推荐文章于 2024-05-16 04:04:41 发布

阅读量3.5k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80363033

版权

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() - 获取指定属性的值
removeAttr() - 移除指定的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="operateDOM.css">
    <script src="jquery-3.3.1.js"></script>
    <script src="operateDOM.js"></script>
    <style>
        p{
            width: 250px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <button>设置属性</button>
    <button>获取属性</button>
    <button>移除属性</button>
    <button>设置值</button>
    <button>获取值</button>
    <button>设置html内容</button>
    <button>获取html内容</button>
    <button>设置text内容</button>
    <button>获取text内容</button>
    <div>
        <input type="text" id="txt"/>
    </div>
</body>
</html>

$(document).ready(function () {
    //设置属性
    $("button:eq(0)").click(function () {
        $(this).attr("title","我是一个按钮");
    });
    //获取属性
    $("button:eq(1)").click(function () {
       var a =  $("button:eq(0)").attr("title");
       console.log(a);
    });
    //移除属性
    $("button:eq(2)").click(function () {
        $("button:eq(0)").removeAttr("title");
    });
    //设置值  有一个参数为设置值
    $("button:eq(3)").click(function () {
        $("#txt").val("我是val设置输入的内容");
    });
    //获取值  没有参数为获取值
    $("button:eq(4)").click(function () {
        console.log($("#txt").val());
    });
    //设置html内容
    $("button:eq(5)").click(function () {
        $("div").html("<p>通过html（）方法设置html内容</p>");
    });
    //获取html内容
    $("button:eq(6)").click(function () {
        console.log($("div").html());
    });
    //设置text内容
    $("button:eq(7)").click(function () {
        $("div").text("通过text（）方法设置文本内容");
    });
    //获取text内容
    $("button:eq(8)").click(function () {
        console.log($("div").text());
    });
});

通过html（）方法获取html内容，会连带p标签一起输出，结果如下：

通过text（）方法获取文本内容，只输出文本内容。

sleepwalker_1992

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery常用的DOM操作（设置属性、值、内容）

text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值html文件&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&a
复制链接

扫一扫

专栏目录