jQuery 更改文字

Anika Tabassum Era 2023年1月30日 2022年7月18日
  1. jQuery 中的 text() 方法
  2. 使用 jQuery 的 text() 方法來直接改變文字
  3. 使用 jQuery 的 text() 方法通過點選事件來改變文字
jQuery 更改文字

在 jQuery 中,存在多種約定以用更少的程式碼行來解決問題。類似地,新增的是 text() 方法。

jQuery 中的 text() 方法

通常,text() 函式在應用於其例項時返回特定元素的文字值。假設我們有一個帶有訊息的 p 標籤:It's a line

所以我們有這樣的語法:

<p id="line"> It's a line.</p>

當我們在例項上應用 text() 方法時,它將返回 "It's a line."。語法如下:

$("#line").text(); // output = "It's a line."

在我們的示例集中,我們將演示如何根據偏好使用新的內容更改現有文字。因此,第一個例項將具有直接更改的實現;下一個將通過點選事件進行。讓我們跳進去!

使用 jQuery 的 text() 方法來直接改變文字

在本例中,text() 方法將把新的文字值作為字串引數。你還可以啟動你的意志的動態價值。

它只會更改靜態 HTML 正文和預覽頁面的值。讓我們檢查程式碼來檢查這一點。

程式碼片段:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    $('#title').text("New Text");
});
</script>
</head>
<body>
<p id='title'>Text</p>

輸出:

使用 text() 方法直接更改文字 - 輸出 1

使用 text() 方法直接更改文字 - 輸出 2

使用 jQuery 的 text() 方法通過點選事件來改變文字

這裡的過程將與前一個類似。如果我們在這裡做基本的區別,我們會做一個點選事件來觸發改變效果。

我們還將看到在單擊 click 事件時 HTML 正文內容是如何產生偏差的。讓我們跳到程式碼行。

程式碼片段:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
  $('#press').click(function(){
    $('#title').text("Text Altered");
});
  });
</script>
</head>
<body>
<p id='title'>Text</p>
<button id="press">Text Change</button>

輸出:

使用 text() 方法通過點選事件更改文字 - 輸出 1

使用 text() 方法通過點選事件更改文字 - 輸出 2

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - jQuery Text