数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery 获取 div 元素中存储的值？
在某些情况下，我们需要检索或获取存储在特定 div 元素内的文本值，以便在某些条件下使用，如果文本是动态的或用于 jQuery 中的其他任务。通过获取存储在 div 元素中的值，我们可以根据元素的值在 jQuery 中执行任何任务。
在 jQuery 中，我们可以使用三种不同的方法检索或获取 div 元素的存储值。这些方法列在下面 -
使用 text() 方法
使用 html() 方法
现在让我们借助代码示例详细了解每种方法的工作原理。
使用 Text() 方法
jQuery 中的 text() 方法用于获取存储在 div 元素内部的值。即使 div 元素包含更多嵌套的 div 或其他元素，此方法也会返回存储在 div 元素中的值。
现在让我们通过使用 jQuery 代码示例进行实际实现来详细讨论它。
注意：请确保 jQuery 脚本已包含在 HTML 文档中。
步骤
步骤 1 - 在第一步中，我们将创建一个简单的 div 元素，并在其中包含一些直接文本值。
步骤 2 - 在下一步中，我们将创建另一个 div 元素，其中包含一些嵌套的 div 元素或其他嵌套元素。
步骤 3 - 在最后一步中，我们将使用 jQuery 的 text() 方法检索两个 div 元素中存储的值。
示例
以下示例将说明如何使用 text() 方法检索存储在单个 div 元素和嵌套 div 元素中的值 -
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.contain {
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: gold;
}
.container {
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aqua;
}
</style>
</head>
<body>
<h2> Retrieving stored value from div element using jQuery </h2>
<div class = "contain">
Direct text inside a single div element.
</div>
<div class = "container">
<div>
<span>
<h4> Heading of the nested div element. </h4>
</span>
</div>
</div>
<p class = "result"> </p>
<script>
var result = $('.result');
var singleDivText = $('.contain').text();
var nestedDivText = $('.container').text();
result.html(" The direct text inside the single div is: <b> " + singleDivText + " </b> </br> The text inside the nested div element is: <b> " + nestedDivText + " </b> ");
</script>
</body>
</html>
在此示例中，我们使用 text() 方法检索了存储在两个不同 div 元素中的值。我们通过赋予它们的类选择这两个 div 元素，然后使用 text() 方法获取存储在其中的值。
使用 Html() 方法
html 方法的工作原理也类似于 text() 方法。这两种方法之间的区别在于 text() 方法仅提供 div 元素内的文本。但是，html() 方法还会根据其包含的嵌套元素的类型返回存储的值以及一些额外的空格和换行符。我们可以使用 jQuery 的 trim() 方法删除检索到的值周围的空格。
让我们借助代码示例了解如何使用 html() 方法检索 div 元素中存储的值。
此示例的算法类似于上述示例的算法，您只需将 text() 方法替换为 html() 方法即可查看如何使用 html() 方法检索存储的值。
示例
在下面的示例中，我们使用 html() 方法检索存储在 div 元素中的值。我们可以清楚地看到，包含嵌套元素的 div 中的值以一些换行符返回，这在 text() 方法中没有出现。
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.contain {
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: gold;
}
.container {
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aqua;
}
</style>
</head>
<body>
<h2> Retrieving stored value from div element using jQuery </h2>
<div class = "contain"> Direct text inside a single div element. </div>
<div class = "container">
<h4> Heading of the nested div element. </h4>
</div>
<p class = "result"> </p>
<script>
var result = $('.result');
var singleDivText = $('.contain').html();
var nestedDivText = $('.container').html();
result.html(" The direct text inside the single div is: <b> " + singleDivText + " </b> </br> The text inside the nested div element without trimming the extra white space is: <b> " + nestedDivText + " </b> ");
</script>
</body>
</html>
结论
在本文中，我们讨论了如何使用 html() 方法和 text() 方法检索存储在 div 元素中的值。我们已经看到，这两种方法如何通过使用代码示例为每种方法进行实际实现来帮助我们检索存储的值。
706 次查看
