jQuery中的.html()和.text()及.val()區別

1.  .html()

    .html()：獲取集合中第一個匹配元素的HTML內容。這個函數不能用於XML文檔。但可以用於XHTML文檔

    .html( htmlString )：設置每一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔

    .html( function(index, oldhtml))：return設置HTML內容的一個函數。index可選。接收選擇器的 下標 位置；oldhtml可選。接收選擇器的當前內容。

    

2.  .text()

    .text()：獲取匹配元素集合中每個元素的合並文本內容，包括他們的后代。這個方法對HTML和XML文檔都有效。

    .text( textString )：設置匹配元素內容的文本

    .text( function(index, oldtext))：return設置文本內容的一個函數。index可選。接收選擇器的 下標 位置；oldtext可選。接收選擇器的當前內容。

3.  .val()

    .val()：獲取匹配的元素集合中的第一個元素的當前值

    .val(value)：設置匹配的元素集合中的每個元素的值

    .val( function(index, oldvalue) ) return設置文本內容的一個函數。index可選。接收選擇器的 下標 位置；oldvalue可選。接收選擇器的當前內容。

　　注意事項：

1.  .html()：方法內部使用的是DOM的innerHTML屬性來處理的，所以在設置與獲取上需要注意的一個最重要的問題，這個操作是針對整個HTML內容（不僅僅是文本內容，元素標簽也包含在里面）
2.  .text()：結果返回一個字符串，包含所有匹配元素的合並文本
3.  .val()：
1. 　　通過.val()處理select元素，當沒有選擇項被選中，他返回null
2. 　　.val()方法多用來設置表單的字段的值
3. 　　如果select元素有multiple（多選）屬性，並且至少一個選擇項被選中，.val()方法返回一個數組。這個數組包含每個選中的選擇項的值

 

　　.html(),.text()和.val()的差異總結：  

 

　　　　.html(),.text(),.val()三種方法都是用來讀取選定元素的內容；

　　　　.html()是用來讀取元素的html內容（包括html標簽）；

　　　　.text()用來讀取元素的純文本內容，包括其后代元素；

　　　　.val()是用來讀取表單元素的"value"值；

　　　　.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上；

　　　　.html()方法使用在元素集合上時，只讀取第一個元素；.val()方法和.html()相同，如果其應用在元素集合上時，只能讀取第一個表單元素的"value"值，但是.text()不一樣，如果.text()應用在多個元素上時，將會讀取所有選中元素的文本內容；

　　　　.html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內容，如果三個方法同時運用在多個元素上時，那么將會替換所有選中元素的內容；

　　　　.html(),.text(),.val()都可以使用回調函數的返回值來動態的改變多個元素的內容；