JQ获取和设置内容、属性-CFANZ编程社区

text(),html(),val()，三者的区别，以及有参无参的区别

先看无参的情况：

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn1").click(function () {
                alert($("#p1").text());
            });
            $("#btn2").click(function () {
                alert($("#p1").html());
            });
            $("#btn3").click(function () {
                alert($("#inp1").val());
            });
        });
    </script>
</head>

<body>
    <p id="p1"><b>jquery</b></p>
    <input type="text" id="inp1" value="javascript">
    <button id="btn1">点击我获取text</button>
    <button id="btn2">点击我获取HTML</button>
    <button id="btn3">点击我获取val</button>
</body>

</html>

点击按钮1弹框内的内容：
111
点击按钮2弹框内的内容：
在这里插入图片描述
点击按钮3弹框内的内容：

由此可以看出，在无参的情况下，text() 获取所选元素的文本内容，html() 获取所选元素的内容(包括HTML标签),val()获取输入框内的value值。

接下来再看有参的情况：

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#p1").text("改变成功咯！");
            });
            $("#btn2").click(function () {
                $("#p2").html("<b><i>HTML改变成功啊！</i></b>")
            });
            $("#btn3").click(function () {
                $("#inp").val("改变value值了！")
            });
        });
    </script>
</head>

<body>
    <p id="p1">我是text内容。</p>
    <p id="p2">我是HTML内容。</p>
    <p>val(): <input type="text" id="inp" value="我是value值"></p>
    <button id="btn1">设置内容</button>
    <button id="btn2">设置HTML</button>
    <button id="btn3">设置value值</button>
</body>

</html>