一、前言

在網頁開發中，我們經常需要對頁面上的文本內容進行操作，例如動態修改段落文字、讀取用戶輸入框的內容、更新按鈕文本等。jQuery 提供了簡潔而強大的方法來處理這些常見的文本操作需求。

本文將帶你全面了解 jQuery 中用于操作文本內容的三個核心方法：

? html() —— 獲取或設置第一個匹配元素的 HTML 內容
? text() —— 獲取所有匹配元素的文本內容并合并成一個字符串
? val() —— 獲取或設置表單字段的當前值

并通過完整的代碼示例幫助你快速上手并掌握 jQuery 文本操作的精髓。

二、jQuery 文本操作概述

三、.html()?方法詳解

? 獲取 HTML 內容

<div id="content"><p>這是一個段落。</p>
</div><script>
$(document).ready(function(){const htmlContent = $('#content').html();console.log(htmlContent); // 輸出：<p>這是一個段落。</p>
});
</script>

? 設置 HTML 內容

$('#content').html('<h1>新的標題</h1>');

?? 注意事項：

• 只作用于第一個匹配元素
• 會覆蓋原有內容
• 可以插入任意 HTML 字符串（包括腳本）

四、.text()?方法詳解

? 獲取純文本內容

<p>第一段</p>
<p>第二段</p><script>
const allText = $('p').text();
console.log(allText); // 輸出："第一段第二段"
</script>

? 設置純文本內容（自動轉義 HTML）

$('#content').text('<strong>安全的文本內容</strong>');
// 輸出為：<strong>安全的文本內容</strong> 而不是加粗文本

?? 特點：

• 自動合并多個元素內容
• 自動解碼 HTML 實體
• 不會執行 HTML 標簽（更安全）

五、.val()?方法詳解

? 獲取表單元素的值

<input type="text" id="username" value="張三"><script>
const username = $('#username').val();
console.log(username); // 輸出：張三
</script>

? 設置表單元素的值

$('#username').val('李四');

? 獲取下拉菜單選中值

<select id="color"><option value="red">紅色</option><option value="blue">藍色</option>
</select><script>
const selectedColor = $('#color').val();
console.log(selectedColor); // 輸出選中項的 value 值
</script>

? 獲取復選框組的選中值（數組）

<input type="checkbox" name="fruit" value="apple"> 蘋果
<input type="checkbox" name="fruit" value="banana"> 香蕉
<input type="checkbox" name="fruit" value="orange"> 橘子<script>
const selectedFruits = $('input[name="fruit"]:checked').map(function(){return $(this).val();
}).get();console.log(selectedFruits);
</script>

六、三者區別總結

七、實際開發中的應用場景

? 場景1：動態更新提示信息

<div id="message"></div>
<button id="updateBtn">更新提示</button><script>
$('#updateBtn').click(function(){$('#message').text('您點擊了按鈕！');
});
</script>

? 場景2：富文本編輯器預覽功能

<textarea id="editor"></textarea>
<div id="preview"></div>
<button id="previewBtn">預覽</button><script>
$('#previewBtn').click(function(){$('#preview').html($('#editor').val());
});
</script>

? 場景3：驗證輸入框內容

<input type="text" id="email" placeholder="請輸入郵箱">
<button id="checkBtn">驗證</button>
<p id="errorMsg"></p><script>
$('#checkBtn').click(function(){const email = $('#email').val();if (!email.includes('@')) {$('#errorMsg').text('請輸入有效的郵箱地址');} else {$('#errorMsg').text('');}
});
</script>

八、注意事項與最佳實踐

九、總結對比表：jQuery 文本操作一覽

十、結語

感謝您的閱讀！如果你有任何疑問或想要分享的經驗，請在評論區留言交流！