使用JQuery进行DOM操作

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值
    ?
    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
    <!DOCTYPE html>
    <html>
     
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
            </script>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("#btn1").click(function() {
                        alert("值为: " + $("#test1").text());
                    });
                    $("#btn2").click(function() {
                        alert("值为: " + $("#test1").html());
                    });
                    $("#btn3").click(function() {
                        alert("值为: " + $("#test2").val());
                    });
                    $("#btn4").click(function() {
                        alert("值为：" + $("#test3").attr("href"));
                    });
     
                });
            </script>
        </head>
     
        <body>
            <p id="test1">这是一个强调的<em>文字</em></p>
            <input type="text" id="test2" value="this is a text" />
            <a href="//this is a link" id="test3">this is a link</a>
            <button id="btn1">显示文本</button>
            <button id="btn2">显示 HTML</button>
            <button id="btn3">显示值</button>
            <button id="btn4">显示 href 属性的值</button>
        </body>
     
    </html>

    设置内容 - text()、html() 以及 val() 设置属性attr()

    ?
    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
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("#test1").text("this is paragraph 1");
      });
      $("#btn2").click(function(){
        $("#test2").html("<b>this is paragraph 2</b>");
      });
      $("#btn3").click(function(){
        $("#test3").val("this is text");
      });
        $("#btn4").click(function(){
        $("font").attr("color","aqua");
      });
    });
    </script>
    </head>
     
    <body>
    <p id="test1">这是段落1。</p>
    <p id="test2">这是段落2。</p>
    <p>输入框: <input type="text" id="test3" value="这是文本框"></p>
    <font color="red">Color</font>
         
    <button id="btn1">设置文本</button>
    <button id="btn2">设置 HTML</button>
    <button id="btn3">设置值</button>
    <button id="btn4"> 修改颜色</button>
    </body>
    </html>

    　　

     

posted @   少说点话  阅读(3040)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
网站运行：7年51天17时24分9秒
点击右上角即可分享
微信分享提示

目录导航