jQuery是一個廣泛使用的JavaScript庫,它簡化了網頁編程中的HTML文檔遍歷、事件處理、文檔操作、動畫效果和Ajax交互等任務。其中jQuery的text()方法可以用來獲取或設置HTML元素的文本內容。
$(selector).text() //獲取指定元素的文本內容
$(selector).text(text) //設置指定元素的文本內容為text
在使用text()方法獲取元素文本時,可以使用選擇器指定需要獲取的元素,也可以通過遍歷DOM樹來獲取多個元素的文本內容,如下面的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery text()方法示例</title>
</head>
<body>
<div>Hello!</div>
<p>這是一段文本內容。</p>
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
<li>列表項4</li>
</ul>
<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
//獲取指定元素的文本內容
var divText = $("div").text();
var pText = $("p").text();
var liText = $("li").text(); //獲取多個元素的文本內容,將它們拼接成一個字符串
//設置指定元素的文本內容為text
$("div").text("Hello, jQuery!");
$("p").text("這是新的文本內容。");
$("li").text("新的列表項");
console.log(divText); //輸出:Hello!
console.log(pText); //輸出:這是一段文本內容。
console.log(liText); //輸出:列表項1列表項2列表項3列表項4
</script>
</body>
</html>
在設置元素文本時,text()方法會覆蓋元素原有的HTML標簽和屬性,只會保留文本內容。如果需要設置帶有HTML標簽和屬性的文本內容,可以使用html()方法。
$(selector).html(html) //設置指定元素的HTML內容為html
總之,text()方法是jQuery中用來獲取或設置元素文本的重要函數,和其他函數配合使用,能夠為動態頁面的開發提供有力支持。
下一篇如何讀取css屬性