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

text()方法

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

示例：

例如我们获取下列

标签中的文本内容：

<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').text();
    alert(content);
  });
</script>


  
你好，欢迎来到侠课岛!
  

    
希望侠课岛中有适合你的编程课程。
  

在浏览器中演示效果：

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

示例：

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

<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('.content').text("hello, xkd!");
    });
  });
</script>


  
你好，欢迎来到侠课岛!
  
点击按钮

在浏览器中演示效果：

html()方法

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

示例：

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

<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').html();
    alert(content);
  });
</script>


  
你好，欢迎来到侠课岛!

在浏览器中演示效果：

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

<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('.hello').html('你好，欢迎来到侠课岛!');
  });
</script>


  
向下面的p标签中添加文本内容：
  

在浏览器中演示效果：

val()方法

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

示例：

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

<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      alert($('input').val());
    });
  });
</script>


  文本输入框：
  

    获取输入框的值
  

在浏览器中演示效果：

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

<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('input').val('summer')
    });
  });
</script>


  文本输入框：
  

    获取输入框的值
  

在浏览器中演示效果：

attr()方法

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

示例：

例如下面这个例子：

<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    alert($('div').attr("class"));
  });
</script>


  
获取class属性的值

在浏览器中演示效果：

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

示例：

将下面

标签中的 class 属性的值设置为 summer：

<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('div').attr("class", "summer")
  });
</script>


  
设置class属性的值

在浏览器中演示效果：

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

Tags：jquerytext()