jquery 查询text

原创

mob649e815375e5 2023-10-24 21:30:28 ©著作权

文章标签 jQuery HTML javascript 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e815375e5的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery查询text

jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果和Ajax等操作。在jQuery中，我们可以使用选择器来获取元素，并对其进行各种操作。其中，查询元素的text内容是一项基本的操作。

本文将介绍如何使用jQuery查询元素的text内容，并给出一些常见的代码示例。

获取元素的text内容

在jQuery中，我们可以使用text()方法来获取元素的text内容。这个方法可以用于任何对象，包括HTML元素、DOM节点和jQuery对象等。

下面是一个简单的示例，演示如何获取一个元素的text内容：

// HTML
<div id="myDiv">Hello World!</div>

// JavaScript
var text = $("#myDiv").text();
console.log(text); // 输出：Hello World!

在上面的代码中，我们使用jQuery选择器$("#myDiv")选择了一个id为myDiv的元素，并使用text()方法获取了它的text内容。

需要注意的是，text()方法只返回第一个匹配元素的text内容。如果需要获取多个元素的text内容，可以使用遍历方式来处理。

下面是一个示例，演示如何获取多个元素的text内容：

// HTML
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

// JavaScript
$("#myList li").each(function() {
  var text = $(this).text();
  console.log(text);
});

在上面的代码中，我们使用jQuery选择器$("#myList li")选择了myList元素下的所有li元素，并使用each()方法遍历这些元素。在遍历过程中，我们使用text()方法获取每个元素的text内容，并输出到控制台。

修改元素的text内容

除了获取元素的text内容，我们还可以使用text()方法来修改元素的text内容。

下面是一个示例，演示如何修改一个元素的text内容：

// HTML
<div id="myDiv">Hello World!</div>

// JavaScript
$("#myDiv").text("New Text");

在上面的代码中，我们使用text()方法将myDiv元素的text内容修改为New Text。

同样地，text()方法只会修改第一个匹配元素的text内容。如果需要修改多个元素的text内容，可以使用遍历方式来处理。

下面是一个示例，演示如何修改多个元素的text内容：

// HTML
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

// JavaScript
$("#myList li").each(function(index) {
  $(this).text("New Item " + (index + 1));
});

在上面的代码中，我们使用jQuery选择器$("#myList li")选择了myList元素下的所有li元素，并使用each()方法遍历这些元素。在遍历过程中，我们使用text()方法将每个元素的text内容修改为New Item加上它的索引值。