javaweb/JQuery/src/dom/html_text_val.html at master · CPU-Code/javaweb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容操作</title>
    <script src="../js/jquery-3.3.1.min.js"></script>

    <!--
    1. 内容操作
        1. html(): 获取/设置元素的标签体内容   <a><font>内容</font></a>  <font>内容</font>
        2. text(): 获取/设置元素的标签体纯文本内容   <a><font>内容</font></a> 内容
        3. val()： 获取/设置元素的value属性值
    -->

    <script>
        $(function () {
            // 获取myinput 的value值
            var value = $("#myinput").val();
            alert("value = " + value);

            $("#myinput").val("cpu");

            // 获取mydiv的标签体内容
            var html = $("#mydiv").html();
            alert("html = " + html);

            $("#mydiv").html("<p>cpucode</p>");

            // 获取mydiv文本内容
            var text = $("#mydiv").text();
            alert("text = " + text);

            $("#mydiv").text("哈哈");
        });
    </script>
</head>
<body>
    <input id="myinput" type="text" name="username" value="cpu_code">

    <br>

    <div id="mydiv">
        <p><a href="#">标题标签</a></p>
    </div>
</body>
</html>