改變步驟:1、利用jquery選擇器取得指定span元素,語法「$("選擇器")」;2、利用text()或html()函數來修改指定元素物件的內容值,語法“元素物件.text("新內容")”或“元素物件.html("新內容")”。
本教學操作環境:windows7系統、jquery3.6.1版本、Dell G3電腦。
在jquery中,可以利用jquery選擇器和text()(或html())函數來改變span的內容值。
實作想法:
取得指定span元素物件。
修改指定元素物件的內容值。
實作步驟:
步驟1、利用jquery選擇器取得指定span元素
$("选择器")
會傳回包含指定span元素的jquery物件
#步驟2、利用text()或html()函數來修改指定元素物件的內容值
text()可以設定元素的文字內容,只需將文字內容設為新值即可變更。
html()可以設定或傳回的內容,是包含文字和HTML標籤的內容。
span元素对象.text("新内容") span元素对象.html("新内容")
範例:
<!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()修改的新内容值") $("#sp2").html('html()修改的新内容值'); $("#sp3").html('<b>html()修改的新内容值</b>'); }); }); </script> </head> <body> <button>改变span元素的内容</button><br><br> <span id="sp1">span元素旧内容。</span><br><br> <span id="sp2">span元素旧内容。</span><br><br> <span id="sp3">span元素旧内容。</span><br><br> </body> </html>
#擴充知識:html() 與text() 比較
html() 取得的是元素內部所有的內容,而text() 取得的只是文字內容。
<!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">PHP中文网</strong></p> html()是:<input id="txt1" type="text" /><br /> text()是:<input id="txt2" type="text" /> </body> </html>
對於 html() 和 text() 這兩個方法的區別,從下表就可以很清楚地比較出來。
HTML程式碼 | html() | #text() |
---|---|---|
PHP中文網 | PHP中文網 | |
PHP中文網
|
PHP中文網 | PHP中文網 |
(空白字串) |
【推薦學習:jQuery影片教學、web前端開發】
以上是jquery怎麼改變span的值的詳細內容。更多資訊請關注PHP中文網其他相關文章!