資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery 為文字中的所有單詞新增下劃線？
在網頁開發中，為文字新增下劃線是一個常見的需求，並且可以使用 jQuery 很容易地實現。在本文中，我們將瞭解如何使用 jQuery 為文字中的所有單詞新增下劃線，並學習執行此操作的不同方法。
在深入瞭解各種方法之前，讓我們首先了解 jQuery 的基本概念。jQuery 是一個快速且簡潔的 JavaScript 庫，它簡化了 HTML 文件遍歷、事件處理和動畫。它旨在使 Web 開發人員的工作更輕鬆，它透過提供簡單易讀易寫的語法來做到這一點。
在 jQuery 中為文字的所有單詞新增下劃線的不同方法
現在讓我們詳細瞭解一下在 jQuery 中為文字的所有單詞新增下劃線的一些不同方法。
方法 1：.css() 方法
為給定文字的所有單詞新增下劃線的第一種方法是使用 jQuery 中的 .css() 方法。.css() 方法用於獲取或設定元素的 CSS 屬性，此外，它還可以透過將“text-decoration”屬性設定為“underline”來為文字新增下劃線。
語法
以下是使用 jQuery 中的 .css() 方法為文字的所有單詞新增下劃線的語法。
$(document).ready(function(){
$('p').css('text-decoration', 'underline');
});
示例
在此示例中，我們使用了 .css() 方法為選定的 HTML 元素添加了“text-decoration: underline”樣式。我們使用 $('p') 選擇器選擇了 <p> 元素，並使用此方法為其添加了“text-decoration: underline”樣式。現在，當用戶單擊按鈕時，選定的元素將新增下劃線。
<html>
<head>
<title>Underline Text using the .css() method </title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2> Underline Text using the .css() method </h2>
<p>Tutorials Point Simply Easy Learning</p>
<button id="btn-underline">Underline Text</button>
<script>
$(document).ready(function() {
$('#btn-underline').click(function() {
$('p').css('text-decoration', 'underline');
});
});
</script>
</body>
</html>
方法 2：使用 .wrapInner() 方法
為給定文字的所有單詞新增下劃線的第二種方法是使用 jQuery 中的 .wrapInner() 方法。此方法用於將 HTML 結構（如 <u>）包裝在 HTML 元素的內容周圍。此外，它還用於將 <u> 標籤包裝在文字的所有單詞周圍。
語法
以下是使用 jQuery 中的 .wrapInner() 方法為文字的所有單詞新增下劃線的語法。
$(document).ready(function(){
$('p').wrapInner('<u></u>');
});
示例
在此示例中，我們使用了 .wrapInner() 方法將選定元素的內容用 <u> 標籤包裝，該標籤會將下劃線樣式應用於給定的文字。現在，我們使用 $('p') 選擇器選擇了 <p> 元素，並使用此方法將其內容用 <u> 標籤包裝。現在，當用戶單擊按鈕時，選定的內容將用 <u> 標籤包裝，併為文字新增下劃線。
<html>
<head>
<title>Underline Text using the .wrapInner() method </title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2> Underline Text using the .wrapInner() method </h2>
<p>Tutorials Point. Simply Easy Learning.</p>
<button id="btn-underline">Underline Text</button>
<script>
$(document).ready(function() {
$('#btn-underline').click(function() {
$('p').wrapInner('<u></u>');
});
});
</script>
</body>
</html>
方法 3：使用 .each() 方法
為給定文字的所有單詞新增下劃線的最後一種方法是使用 jQuery 中的 .each() 方法。.each() 方法迭代一組 HTML 元素，併為文字的所有單詞包裝一個 <u> 標籤以執行下劃線操作。
語法
以下是使用 jQuery 中的 .each() 方法為文字的所有單詞新增下劃線的語法。
$(document).ready(function(){
$('p').each(function(){
$(this).html($(this).text().replace(/\b(\w+)\b/g, '<u>$1</u>'));
});
});
示例
在此示例中，我們使用了 .each() 方法，該方法迴圈遍歷每個選定的 HTML 元素，並將其文字替換為包含應用於每個單詞的 <u> 標籤的新文字。現在，當用戶單擊按鈕時，選定元素的文字將被替換為包含應用於每個單詞的 <u> 標籤的新文字，從而為文字新增下劃線。
<html>
<head>
<title>Underline Text using the .each() method </title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2> Underline Text using the .each() method </h2>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
<button id="btn-underline">Underline Text</button>
<script>
$(document).ready(function(){
$('#btn-underline').click(function(){
$('p').each(function(){
$(this).html($(this).text().replace(/\b(\w+)\b/g, '<u>$1</u>'));
});
});
});
</script>
</body>
</html>
結論
在本文中，我們學習瞭如何使用 jQuery 為文字新增下劃線。我們瞭解到 jQuery 包含多種方法來為文字的所有單詞新增下劃線，包括 .css() 方法、.wrapInner() 方法和 .each() 方法。第一種方法用於獲取或設定元素的 CSS 屬性，還用於透過將“text-decoration”屬性設定為“underline”來為文字新增下劃線。第二種方法，即 wrapInner() 方法，將 HTML 結構包裝在元素的內容周圍，並進一步用於將 <u> 標籤包裝在文字的所有單詞周圍。最後，我們學習了 .each() 方法，它迭代一組元素以將 <u> 標籤包裝在文字的所有單詞周圍併為文字新增下劃線。藉助給定的方法，我們可以輕鬆地在 Web 應用程式中為文字新增下劃線。
728 次檢視
