- .html()用為讀取和修改元素的HTML標簽
- .text()用來讀取或修改元素的純文本內容
- .val()用來讀取或修改表單元素的value值。
這三個方法功能上的對比
- .html(),.text(),.val()三種方法都是用來讀取選定元素的內容；只不過.html()是用來讀取元素的HTML內容（包括其Html標簽），.text()用來讀取元素的純文本內容，包括其后代元素，.val()是用來讀取表單元素的"value"值。其中.和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上；另外.html()方法使用在多個元素上時，只讀取第一個元素；.val()方法和.html()相同，如果其應用在多個元素上時，只能讀取第一個表單元素的"value"值，但是.text()和他們不一樣，如果.text()應用在多個元素上時，將會讀取所有選中元素的文本內容。
- .html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內容，如果三個方法同時運用在多個元素上時，那么將會替換所有選中元素的內容。
- .html(),.text(),.val()都可以使用回調函數的返回值來動態的改變多個元素的內容。
例子：<div id="div">
<div>here is a big DIV</div>
</div>
function showVal()
{
var div = $("#div");
alert("showVal(): "+div.val());
顯示為空
}
function showHtml()
{
var div = $("#div");
alert("showHtml(): "+div.html());
顯示為：
<p>here is a paragram</p>
<div>here is a big DIV</div>
}
function showText()
{var div = $("#div");
alert("showText(): "+div.text());
顯示為：
here is a paragram
here is a big DIV
}
總結：val()---一般 用在input上，而不用在其他元素，用來獲取input或者是select的值
html()和text()可用在多種元素上，但是html()相當于依據源代碼返回，也就是在返回的內容中會包含各種tag，而text()則相當于是依據頁面顯示返回，返回的內容是出去各種tag之間的內容
html屬性中有兩個方法，一個有參，一個無參
1. 無參html（）：取得第一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔，返回的是一個String
| 例子：
html頁面代碼：<div><p>Hello</p></div> jquery代碼：$("div").html(); 結果：Hello |
2.有參html（val）：設置每一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔。返回一個jquery對象
| html頁面代碼：<div></div>
jquery代碼：$("div").html("<p>Nice to meet you</p>"); 結果：[ <div><p> Nice to meet you</p></div> ] |
其次，text屬性中有兩個方法，一個有參，一個無參
1. 無參text（）：取得所有匹配元素的內容。結果是由所有匹配元素包含的文本內容組合起來的文本。返回的是一個String
| 例子：
html頁面代碼：<p><b>Hello</b> fine</p> <p>Thank you!</p> jquery代碼：$("p").text(); 結果：HellofineThankyou! |
2.有參text（val）：設置所有匹配元素的文本內容,與 html() 類似, 但將編碼 HTML (將 "<" 和 ">" 替換成相應的HTML實體).返回一個jquery對象
| html頁面代碼：<p>Test Paragraph.</p>
jquery代碼：$("p").text("<b>Some</b> new text."); 結果:[ <p><b>Some</b> new text.</p> ] |
最后，val（）屬性中也有兩個方法，一個有參，一個無參。
1.無參val（）：獲得第一個匹配元素的當前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多選，將返回一個數組，其包含所選的值。
返回的是一個String、 array
結果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
|
例子： //多選下拉框，$('#multiple').val()返回數組
//$("#multiple").val().join(", "))以,連接數組中每個值
html頁面代碼 ： <p></p><br/>
<select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select> jquery代碼： ("p").append( "<b>Single:</b> " + $("#single").val() + " <b>Multiple:</b> " + $("#multiple").val().join(", ")); |
2.有參val（val）：設置每一個匹配元素的值。在 jQuery 1.2, 這也可以為check,select,radio元件賦值,返回一個jquery對象
|
html頁面代碼： <input type="text"/> jquery代碼：$("input").val("hello world!"); 結果：hello world! |
文章列表
留言列表
