更新時間:2021-07-14 來源:黑馬程序員 瀏覽量:
jQuery中操作元素內容的方法,主要包括html()方法、text()方法和val()方法。html()方法用于獲取或設置元素的HTML內容,text()方法用于獲取或設置元素的文本內容,val()方法用來獲取或設置表單元素的value值。具體使用說明如表1所示。
表1 元素內容操作
語法 | 說明 |
---|---|
html() | 獲取第一個匹配元素的HTML內容 |
html(content) | 設置第一個匹配元素的HTML內容 |
text() | 獲取所有匹配元素包含的文本內容組合起來的文本 |
text(content) | 設置所有匹配元素的文本內容 |
val() | 獲取表單元素的value值 |
val(value) | 設置表單元素的value值 |
為了讓讀者更好地理解元素內容相關方法的使用,下面通過具體代碼進行演示。
<div> <span>我是內容</span> </div> <input type="text" value="請輸入內容"> <script> // 1. 獲取設置元素內容html() console.log($("div").html()); // 輸出結果:<span>我是內容</span> $("div").html("<span>hello</span>"); // 修改div的內容(HTML會被解析) // 2. 獲取設置元素文本內容text() console.log($("div").text()); // 輸出結果:hello $("div").text("<span>123</span>"); // 設置div的文本內容(不解析HTML) // 3. 獲取設置表單值val() console.log($("input").val()); // 輸出結果:請輸入內容 $("input").val("123"); // 設置表單元素的值為123 </script>
通過瀏覽器訪問測試,運行結果如圖1所示。
圖1 獲取元素內容
從圖1可以看出,使用html()方法獲取的元素內容含有HTML標簽(如span),而使用text()方法獲取的是去除HTML標簽的內容,將該元素包含的文本內容組合起來的文本。因此,讀者根據項目的需求,在開發(fā)中選擇合適的方法使用即可。
猜你喜歡: