美文网首页
jQuery 获取和设置HTML元素

jQuery 获取和设置HTML元素

作者: 前白 | 来源:发表于2021-10-05 20:15 被阅读0次

    jQuery 中包含更改和操作 HTML 元素和属性的强大方法。我们可以通过这些方法来获取 HTML 元素中的文本内容、元素内容(例如HTML标签)、属性值等。

    text()方法

    text() 方法可以用于设置或获取所选元素的文本内容。

    示例:

    例如我们获取下列 <p> 标签中的文本内容:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery_侠课岛(9xkd.com)</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
      $(function(){
        var content = $('.hello').text();
        alert(content);
      });
    </script>
    </head>
    <body>
      <p class="hello">你好,欢迎来到侠课岛!</p>
      <div>
        <p>希望侠课岛中有适合你的编程课程。</p>
      </div>
    </body>
    </html>
    

    在浏览器中演示效果:


    image

    除了获取文本内容,text() 还可以用于设置文本内容,我们可以来看一下。

    示例:

    例如通过 text().content 的文本内容设置为 hello, xkd!

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery_侠课岛(9xkd.com)</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
      $(function(){
        $("button").click(function(){
          $('.content').text("hello, xkd!");
        });
      });
    </script>
    </head>
    <body>
      <p class="content">你好,欢迎来到侠课岛!</p>
      <p><button>点击按钮</button></p>
    </body>
    </html>
    
    

    在浏览器中演示效果:


    html()方法

    html() 方法用于设置或返回所选元素的内容(包括HTML标记)。

    示例:

    通过 html() 方法获取 p 元素的内容:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery_侠课岛(9xkd.com)</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
      $(function(){
        var content = $('.hello').html();
        alert(content);
      });
    </script>
    </head>
    <body>
      <p class="hello">你好,欢迎来到侠课岛!</p>
    </body>
    </html>
    

    在浏览器中演示效果:


    image

    除此之外,我们还可以使用 html() 方法来设置指定元素的内容:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery_侠课岛(9xkd.com)</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
      $(function(){
        $('.hello').html('你好,欢迎来到侠课岛!');
      });
    </script>
    </head>
    <body>
      <p>向下面的p标签中添加文本内容:</p>
      <p class="hello"></p>
    </body>
    </html>
    

    在浏览器中演示效果:

    image

    val()方法

    val() 用于设置或返回表单字段的值。该方法大多时候用于 input 元素。

    示例:

    例如获取输入框 input 中的值:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery_侠课岛(9xkd.com)</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
      $(function(){
        $("button").click(function(){
          alert($('input').val());
        });
      });
    </script>
    </head>
    <body>
      文本输入框:<input type="text" name="name" value="summer" />
      <p>
        <button>获取输入框的值</button>
      </p>
    </body>
    </html>
    

    在浏览器中演示效果:


    image

    如果要使用 val() 方法设置 value 的值,我们可以像下面这样做:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery_侠课岛(9xkd.com)</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
      $(function(){
        $("button").click(function(){
          $('input').val('summer')
        });
      });
    </script>
    </head>
    <body>
      文本输入框:<input type="text" name="name" value="" />
      <p>
        <button>获取输入框的值</button>
      </p>
    </body>
    </html>
    

    在浏览器中演示效果:

    attr()方法

    attr() 方法用于设置或返回被选元素的属性值。

    示例:

    例如下面这个例子:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery_侠课岛(9xkd.com)</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
      $(function(){
        alert($('div').attr("class"));
      });
    </script>
    </head>
    <body>
      <div class="xkd">获取class属性的值</div>
    </body>
    </html>
    

    在浏览器中演示效果:

    image

    attr() 方法除了获取元素的属性值,还可以设置元素的属性值,我们来看一下。

    示例:

    将下面 <div> 标签中的 class 属性的值设置为 summer

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery_侠课岛(9xkd.com)</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
      $(function(){
        $('div').attr("class", "summer")
      });
    </script>
    </head>
    <body>
      <div>设置class属性的值</div>
    </body>
    </html>
    

    在浏览器中演示效果:


    image

    链接:https://www.9xkd.com/

    相关文章

      网友评论

          本文标题:jQuery 获取和设置HTML元素

          本文链接:https://www.haomeiwen.com/subject/hiwgnltx.html