了解jQuery中可用于處理文本的方法

2024-03-03 10:51:48 前端筆記 17

了解 jQuery 中可用于處理文本的方法
jQuery 是一個廣泛應用于前端開發的 JavaScript 庫，它提供了許多方便易用的方法來操作 DOM 元素。在處理文本時，jQuery 提供了一系列方法，讓開發者可以輕松地修改、獲取和操作文本內容。下面將介紹一些常用的 jQuery 文本處理方法，并附上具體的代碼示例，幫助大家更好地了解和使用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 文本處理示例</title>
<script src="/cdnjs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="content">Hello, World!</div>

<script>
$(document).ready(function(){
  var text = $('#content').text(); // 獲取文本內容
  console.log(text);

  $('#content').text('Hello, jQuery!'); // 設置文本內容
});
</script>
</body>
</html>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 文本處理示例</title>
<script src="/cdnjs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="content">Hello, <strong>World!</strong></div>

<script>
$(document).ready(function(){
  var html = $('#content').html(); // 獲取 HTML 內容
  console.log(html);

  $('#content').html('Hello, <strong>jQuery!</strong>'); // 設置 HTML 內容
});
</script>
</body>
</html>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 文本處理示例</title>
<script src="/cdnjs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input" value="Hello, World!">

<script>
$(document).ready(function(){
  var value = $('#input').val(); // 獲取表單元素的值
  console.log(value);

  $('#input').val('Hello, jQuery!'); // 設置表單元素的值
});
</script>
</body>
</html>

通過學習和掌握這些 jQuery 文本處理方法，開發者可以更加靈活地操作文本內容，為頁面制作和交互效果增加更多可能性。希望以上示例對大家有所幫助，讓大家能更加熟練地運用 jQuery 進行前端開發。