資料結構
網路
關係資料庫管理系統
作業系統
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 次檢視
