JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯絡？ jQuery中的text()、html()和val()

標籤：multiple   baidu   運算式   inpu   pen   html標籤   實體   文字框   代碼   

一、JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯絡？
jS中設定或者擷取所選內容的值：
①innerHTML :屬性設定或返回該標籤內的HTML。也就是從對象的起始位置到終止位置的全部內容,包括Html標籤。
②outerHTML：屬性設定或返回該標籤及標籤內的HTML。也就是從對象的該標籤起始到終止位置的全部內容,包括Html標籤。
如果要輸出不含HTML標籤的內容，可以使用innerHTML取得包含HTML標籤的內容後，再用Regex去除HTML標籤，
③inneText：從起始位置到終止位置的內容，但它去除html標籤。（只能在IE和chrome下使用）
④outerText 設定(包括標籤)或擷取(不包括標籤)對象的文本 <br><br>
⑤value：屬性可設定或返回密碼域的預設值。擷取文字框的值
二、jQuery中的text()、html()和val()
jQuery中設定或者擷取所選內容的值：
①text();設定或者擷取所選元素的常值內容；
②html();設定或者擷取所選元素的內容（包括html標記）；
③val();設定或者擷取表單欄位的值（前提是表單設定了value屬性）；
首先，html屬性中有兩個方法，一個有參，一個無參

  1. 無參html（）：取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔，返回的是一個String 例子：        html頁面代碼：<div><p>Hello</p></div>       jquery代碼：$("div").html();      結果：<p>Hello</p> 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
jquery代碼：$("p").append( "<b>Single:</b> " + $("#single").val() + " <b>Multiple:</b> " + $("#multiple").val().join(", "));
結果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
2.有參val（val）：設定每一個匹配元素的值。在 jQuery 1.2, 這也可以為check,select,radio元件賦值,返回一個jquery對象
html頁面代碼：<input type="text"/>
jquery代碼：$("input").val("hello world!");
結果：hello world!

http://ife.baidu.com/note/detail/id/635

JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯絡？ jQuery中的text()、html()和val()