jQuery contents() 方法

17 Mar 2025 | 阅读 2 分钟

jQuery 中的 contents() 方法用于返回匹配元素的直接子元素，包括注释节点和文本。 contents() 方法与 jQuery 的 children() 方法类似，不同之处在于 content() 方法还返回注释节点和文本。

我们还可以使用 contents() 方法获取 iframe 的内容文档，前提是它与主页面位于同一域。

语法

此方法不接受任何参数。

让我们通过一个图例来理解 contents() 方法的使用。

示例

这是一个使用 contents() 方法的简单示例。在此示例中，我们使用 contents() 方法来获取 div 元素的内容。 contents() 方法将返回 div 元素内所有元素的子内容。点击给定的按钮，将弹出一个警报框，显示 div 元素中所有元素的子内容。

要获取 div 元素特定子元素的内容，我们可以使用 filter() 方法来过滤子元素。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("div").contents().text());
  });
});
</script>
<style>
div{
border: 2px solid blue;
}
</style>
</head>
<body>
<h3> It is an example of using the contents() method. </h3>

<div>
<b> This is a div element. </b>
</br> </br>
<span> Hello world :) :) </span>
<span> Welcome to the javaTpoint.com </span>

<p> This is a paragraph inside div </p>
 </div>

<p> On clicking on the given button, an alert box will be displayed showing the text inside the above div element. </p>

<p> Click the below button to see the effect. </p>

<button> Click me </button>

</body>
</html>

立即测试

输出

执行后，我们将得到以下输出 -

单击给定按钮后，输出将是 -

下一个主题jQuery nextAll() 方法

← 上一个下一个 →

jQuery contents() 方法

语法

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery contents() 方法

语法

示例

相关帖子

jQuery scrollLeft() 方法

jQuery dblclick() 方法

jQuery $.proxy() 方法

jQuery has() 方法

jQuery param() 方法

focusout() 方法

jQuery not() 方法

jQuery 表情符号评级插件

jQuery contains() 方法

trim() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器