溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery如何改變span的值

發(fā)布時(shí)間：2022-12-16 17:32:09 來(lái)源：億速云 閱讀：437 作者：iii 欄目：web開(kāi)發(fā)

本篇內(nèi)容主要講解“jquery如何改變span的值”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“jquery如何改變span的值”吧!

改變步驟：1、利用jquery選擇器獲取指定span元素，語(yǔ)法“$("選擇器")”；2、利用text()或html()函數(shù)來(lái)修改指定元素對(duì)象的內(nèi)容值，語(yǔ)法“元素對(duì)象.text("新內(nèi)容")”或“元素對(duì)象.html("新內(nèi)容")”。

在jquery中，可以利用jquery選擇器和text()（或html()）函數(shù)來(lái)改變span的內(nèi)容值。

實(shí)現(xiàn)思想：

  • 獲取指定span元素對(duì)象。

  • 修改指定元素對(duì)象的內(nèi)容值。

實(shí)現(xiàn)步驟：

步驟1、利用jquery選擇器獲取指定span元素

$("選擇器")

  • 會(huì)返回包含指定span元素的jquery對(duì)象

步驟2、利用text()或html()函數(shù)來(lái)修改指定元素對(duì)象的內(nèi)容值

  • text()可以設(shè)置元素的文本內(nèi)容，只需將文本內(nèi)容設(shè)置為新值即可改變。

  • html()可以設(shè)置或返回的內(nèi)容，是包含文本和HTML標(biāo)簽的內(nèi)容。

span元素對(duì)象.text("新內(nèi)容")
span元素對(duì)象.html("新內(nèi)容")

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#sp1").text("text()修改的新內(nèi)容值")
					$("#sp2").html('html()修改的新內(nèi)容值');
					$("#sp3").html('<b>html()修改的新內(nèi)容值</b>');
				});
			});
		</script>
	</head>
	<body>
		<button>改變span元素的內(nèi)容</button><br><br>
		<span id="sp1">span元素舊內(nèi)容。</span><br><br>
		<span id="sp2">span元素舊內(nèi)容。</span><br><br>
		<span id="sp3">span元素舊內(nèi)容。</span><br><br>
	</body>
</html>

jquery如何改變span的值

擴(kuò)展知識(shí)：html() 與 text() 比較

html() 獲取的是元素內(nèi)部所有的內(nèi)容，而 text() 獲取的僅僅是文本內(nèi)容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(function () {
            var strHtml = $("p").html();
            var strText = $("p").text();
            $("#txt1").val(strHtml);
            $("#txt2").val(strText);
        })
    </script>
	</head>
	<body>
		<p><strong style="color:hotpink">億速云</strong></p>
		html()是：<input id="txt1" type="text" /><br />
		text()是：<input id="txt2" type="text" />
	</body>
</html>

jquery如何改變span的值

對(duì)于 html() 和 text() 這兩個(gè)方法的區(qū)別，從下表就可以很清晰地比較出來(lái)。

HTML代碼html()text()
<div>億速云</div>億速云億速云
<div><em> 億速云 </em></div><em>億速云</em>億速云
<div><em></em></div><em></em>（空字符串）

到此，相信大家對(duì)“jquery如何改變span的值”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手